Typescript: How can Voicing mix into a parametric class?

[zepumph]

Over in phetsims/ratio-and-proportion#384, I wanted to add voicing to a RectangularRadioButtonGroup, but we don't seem to support this:

class TickMarkViewRadioButtonGroup extends Voicing( RectangularRadioButtonGroup < TickMarkView >, 2 ) {
  ...
}

Notice how Webstorm autoformatted it? The error we get by typescript is:

TS2365: Operator '' cannot be applied to types 'typeof RectangularRadioButtonGroup' and 'typeof TickMarkView'.

If I remove the parametric type:
TS2508: No base constructor has the specified number of type arguments.

@jonathanolson, perhaps we can talk about this as part of our review in #1340.

This is only blocking publication of Ratio and Proportion as far as I know.

[jonathanolson]

Seems problematic, I'll look into it.

[zepumph]

@jonathanolson and I talked about it, and were able to get things working with:

type ConstructorOf<C> = { new( ...args: any[] ): C; };

class TickMarkViewRadioButtonGroup extends Voicing<ConstructorOf<RectangularRadioButtonGroup<TickMarkView>>>( RectangularRadioButtonGroup, 2 ) {

We are still working on a way to move that to the mixin files, instead of every usage, but at least this can be non blocking at this point. I'll try it out over in phetsims/sun#699 and phetsims/ratio-and-proportion#384

[jonathanolson]

I'll look into this also, I'm looking at a few mixin typescript things.

[jonathanolson]

This looks like it will be an issue...

[jonathanolson]

Actually this is type-checking

const GenericMix = memoize( <SuperType extends Constructor>( type: SuperType ) => {
  const result = class extends type {
    _someField: string;

    constructor( ...args: any[] ) {
      super( ...args );

      this._someField = 'Testing';
    }

    get someField(): string { return this._someField; }

    set someField( value: string ) { this._someField = value; }
  };

  return result;
} );

class PropertyMixed<T> extends GenericMix( Property )<T> {
  constructor( value: T, options?: PropertyOptions<T> ) {
    super( value, options );
  }
}

const pMixed1 = new PropertyMixed<number>( 5 );
console.log( pMixed1.value, pMixed1.someField );

const pMixed2 = new PropertyMixed<string>( 'hi' );
console.log( pMixed2.value, pMixed2.someField );

Didn't realize we can just have the mix be... generic, and then specify a type parameter to the mixed type. From microsoft/TypeScript#26542 (comment)

[jonathanolson]

The key line is:

class PropertyMixed<T> extends GenericMix( Property )<T> {

@zepumph does this seem to resolve this issue for you?

[zepumph]

That seems pretty nice on paper! I will want to try it out in my mixins after I get some bug fixes pushed over in #1340

[zepumph]

Thanks for the help! I tried this out and it worked perfectly.

Index: js/common/view/TickMarkViewRadioButtonGroup.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/common/view/TickMarkViewRadioButtonGroup.ts b/js/common/view/TickMarkViewRadioButtonGroup.ts
--- a/js/common/view/TickMarkViewRadioButtonGroup.ts	(revision b50407d9c5b80d533d65fd7f078ac39ac6f11b2d)
+++ b/js/common/view/TickMarkViewRadioButtonGroup.ts	(date 1645644173340)
@@ -7,7 +7,7 @@
  */
 
 import merge from '../../../../phet-core/js/merge.js';
-import { ParallelDOM, Path, PathOptions, voicingUtteranceQueue } from '../../../../scenery/js/imports.js';
+import { ParallelDOM, Path, PathOptions, Voicing, voicingUtteranceQueue } from '../../../../scenery/js/imports.js';
 import eyeSlashSolidShape from '../../../../sherpa/js/fontawesome-5/eyeSlashSolidShape.js';
 import RectangularRadioButtonGroup from '../../../../sun/js/buttons/RectangularRadioButtonGroup.js';
 import ActivationUtterance from '../../../../utterance-queue/js/ActivationUtterance.js';
@@ -21,7 +21,7 @@
 // constants
 const ICON_SCALE = 0.45;
 
-class TickMarkViewRadioButtonGroup extends RectangularRadioButtonGroup<TickMarkView> {
+class TickMarkViewRadioButtonGroup extends Voicing( RectangularRadioButtonGroup, 2 )<TickMarkView> {
 
   /**
    * @param tickMarkViewProperty
@@ -80,6 +80,8 @@
     } ];
     super( tickMarkViewProperty, radioButtonItemData, options );
 
+    this.voicingContextResponse = 'a contextualized test';
+    this.voicingSpeakContextResponse();
     const tickMarkContextResponseUtterance = new ActivationUtterance();
     const voicingResponsePacket = new ResponsePacket();
     const tickMarkVoicingContextResponseUtterance = new ActivationUtterance( {