Improve types and usage of generics, see #401

js/common/model/BendingLightModel.ts

@@ -17,6 +17,7 @@ import BendingLightConstants from '../BendingLightConstants.js';
 import Laser from './Laser.js';
 import LightRay from './LightRay.js';
 import MediumColorFactory from './MediumColorFactory.js';
+import LaserViewEnum from './LaserViewEnum.js';
 
 // constants
 const DEFAULT_LASER_DISTANCE_FROM_PIVOT = 9.225E-6;
@@ -30,13 +31,13 @@ abstract class BendingLightModel {
   readonly modelWidth: number;
   readonly modelHeight: number;
   readonly allowWebGL: boolean;
-  readonly laserViewProperty: Property;
-  readonly wavelengthProperty: Property;
-  readonly speedProperty: Property;
-  private readonly indexOfRefractionProperty: Property;
-  readonly showNormalProperty: Property;
-  readonly isPlayingProperty: Property;
-  readonly showAnglesProperty: Property;
+  readonly laserViewProperty: Property<LaserViewEnum>;
+  readonly wavelengthProperty: Property<number>;
+  readonly speedProperty: Property<any>;
+  private readonly indexOfRefractionProperty: Property<number>;
+  readonly showNormalProperty: Property<boolean>;
+  readonly isPlayingProperty: Property<boolean>;
+  readonly showAnglesProperty: Property<boolean>;
   readonly laser: Laser;
   static DEFAULT_LASER_DISTANCE_FROM_PIVOT: number;
   rotationArrowAngleOffset: number | null;
@@ -64,9 +65,10 @@ abstract class BendingLightModel {
     this.allowWebGL = Utils.checkWebGLSupport() && phet.chipper.queryParameters.webgl; // @public (read-only)
 
     // @public, Whether the laser is Ray or Wave mode
-    this.laserViewProperty = new Property( 'ray', {
+    this.laserViewProperty = new Property<LaserViewEnum>( 'ray', {
       validValues: [ 'wave', 'ray' ]
     } );
+
     this.wavelengthProperty = new Property( BendingLightConstants.WAVELENGTH_RED );
     this.isPlayingProperty = new Property( true );
 

js/common/model/IntensityMeter.ts

@@ -16,11 +16,11 @@ import bendingLight from '../../bendingLight.js';
 import Reading from './Reading.js';
 
 class IntensityMeter {
-  readonly readingProperty: Property;
+  readonly readingProperty: Property<Reading>;
   readonly sensorPositionProperty: Vector2Property;
   readonly bodyPositionProperty: Vector2Property;
   private rayReadings: Reading[];
-  readonly enabledProperty: Property;
+  readonly enabledProperty: Property<boolean>;
 
   /**
    * @param {number} sensorX - sensor x position in model coordinates

js/common/model/Laser.ts

@@ -7,22 +7,24 @@
  * @author Chandrashekar Bemagoni (Actual Concepts)
  */
 
+import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import Property from '../../../../axon/js/Property.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
 import Vector2Property from '../../../../dot/js/Vector2Property.js';
 import bendingLight from '../../bendingLight.js';
 import BendingLightConstants from '../BendingLightConstants.js';
 import LaserColor from '../view/LaserColor.js';
+import ColorModeEnum from './ColorModeEnum.js';
 
 class Laser {
   readonly topLeftQuadrant: boolean;
-  readonly onProperty: Property;
-  readonly waveProperty: Property;
-  readonly colorModeProperty: Property;
+  readonly onProperty: Property<boolean>;
+  readonly waveProperty: Property<boolean>;
+  readonly colorModeProperty: Property<'white' | 'singleColor'>;
   readonly emissionPointProperty: Vector2Property;
   readonly colorProperty: DerivedProperty;
-  readonly wavelengthProperty: Property;
+  readonly wavelengthProperty: Property<number>;
   private readonly directionUnitVector: Vector2;
   readonly pivotProperty: Vector2Property;
 
@@ -32,13 +34,13 @@ class Laser {
    * @param {number} angle - laser angle
    * @param {boolean} topLeftQuadrant - specifies whether laser in topLeftQuadrant
    */
-  constructor( wavelengthProperty: Property, distanceFromPivot: number, angle: number, topLeftQuadrant: boolean ) {
+  constructor( wavelengthProperty: Property<number>, distanceFromPivot: number, angle: number, topLeftQuadrant: boolean ) {
 
     this.topLeftQuadrant = topLeftQuadrant;
     this.pivotProperty = new Vector2Property( new Vector2( 0, 0 ) ); // @public, point to be pivoted about, and at which the laser points
-    this.onProperty = new Property( false ); // @public, true if the laser is activated and emitting light
-    this.waveProperty = new Property( false ); // @public
-    this.colorModeProperty = new Property( 'singleColor' ); // @public
+    this.onProperty = new BooleanProperty( false ); // @public, true if the laser is activated and emitting light
+    this.waveProperty = new BooleanProperty( false ); // @public
+    this.colorModeProperty = new Property<'white' | 'singleColor'>( 'singleColor' ); // @public
     this.emissionPointProperty = new Vector2Property( Vector2.createPolar( distanceFromPivot, angle ) ); // @public model the point where light comes out of the laser where the light comes from
 
     // @public (read-only)

js/common/model/MediumColorFactory.ts

@@ -15,7 +15,7 @@ import bendingLight from '../../bendingLight.js';
 import Substance from './Substance.js';
 
 class MediumColorFactory {
-  lightTypeProperty: Property;
+  lightTypeProperty: Property<'singleColor' | 'white'>; // TODO: Single wavelength or single color???
   getColorAgainstWhite: ( indexForRed: number ) => Color;
   getColorAgainstBlack: ( indexForRed: number ) => Color;
 
@@ -81,7 +81,7 @@ const colorBlend = ( a: Color, b: Color, ratio: number ): Color => {
   );
 };
 
-const createProfile = ( AIR_COLOR:Color, WATER_COLOR:Color, GLASS_COLOR:Color, DIAMOND_COLOR:Color ) => ( indexForRed: number) => {
+const createProfile = ( AIR_COLOR: Color, WATER_COLOR: Color, GLASS_COLOR: Color, DIAMOND_COLOR: Color ) => ( indexForRed: number ) => {
 
   // precompute to improve readability below
   const waterIndexForRed = Substance.WATER.indexOfRefractionForRedLight;

js/common/model/Substance.ts

@@ -28,7 +28,7 @@ class Substance {
   readonly indexOfRefractionForRedLight: number;
   readonly name: string;
   readonly indexForRed: number;
-  private readonly custom: boolean;
+  readonly custom: boolean;
   static AIR: Substance;
   static WATER: Substance;
   static GLASS: Substance;

js/common/view/BendingLightScreenView.ts

@@ -22,6 +22,7 @@ import SingleColorLightCanvasNode from './SingleColorLightCanvasNode.js';
 import ColorModeEnum from '../model/ColorModeEnum.js';
 import LaserViewEnum from '../model/LaserViewEnum.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
+import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
 
 type BendingLightScreenViewOptions = {
   occlusionHandler: () => void,
@@ -36,7 +37,7 @@ type BendingLightScreenViewOptions = {
 };
 
 abstract class BendingLightScreenView extends ScreenView {
-  protected readonly showProtractorProperty: Property;
+  protected readonly showProtractorProperty: Property<boolean>;
   readonly bendingLightModel: BendingLightModel;
   protected readonly beforeLightLayer: Node;
   protected readonly beforeLightLayer2: Node;
@@ -130,8 +131,8 @@ abstract class BendingLightScreenView extends ScreenView {
     this.addChild( this.laserViewLayer );
 
     // add rotation for the laser that show if/when the laser can be rotated about its pivot
-    const showRotationDragHandlesProperty = new Property( false );
-    const showTranslationDragHandlesProperty = new Property( false );
+    const showRotationDragHandlesProperty = new BooleanProperty( false );
+    const showTranslationDragHandlesProperty = new BooleanProperty( false );
 
     const laserNode = new LaserNode(
       this.modelViewTransform,
@@ -164,7 +165,7 @@ abstract class BendingLightScreenView extends ScreenView {
     this.addChild( this.afterLightLayer3 );
 
     // switches between ray and wave
-    bendingLightModel.laserViewProperty.link( laserView => {
+    bendingLightModel.laserViewProperty.link( ( laserView: LaserViewEnum ) => {
       bendingLightModel.laser.waveProperty.value = ( laserView === 'wave' );
     } );
 
@@ -174,7 +175,7 @@ abstract class BendingLightScreenView extends ScreenView {
       }
     );
 
-    this.visibleBoundsProperty.link( visibleBounds => this.singleColorLightNode.setCanvasBounds( visibleBounds ) );
+    this.visibleBoundsProperty.link( ( visibleBounds: Bounds2 ) => this.singleColorLightNode.setCanvasBounds( visibleBounds ) );
   }
 
   /**
@@ -206,7 +207,7 @@ abstract class BendingLightScreenView extends ScreenView {
    * @param {number} laserImageWidth
    * @protected
    */
-  addLaserHandles( showRotationDragHandlesProperty: Property, showTranslationDragHandlesProperty: Property,
+  addLaserHandles( showRotationDragHandlesProperty: Property<boolean>, showTranslationDragHandlesProperty: Property<boolean>,
                    clockwiseArrowNotAtMax: ( n: number ) => boolean, ccwArrowNotAtMax: ( n: number ) => boolean, laserImageWidth: number ) {
     const bendingLightModel = this.bendingLightModel;
 

js/common/view/FloatingLayout.ts

@@ -10,6 +10,7 @@
 import ScreenView from '../../../../joist/js/ScreenView.js';
 import bendingLight from '../../bendingLight.js';
 import Node from '../../../../scenery/js/nodes/Node.js';
+import Bounds2 from '../../../../dot/js/Bounds2.js';
 
 // The fraction the objects can float out of the layout bounds
 const floatFraction = 0.3;
@@ -27,7 +28,7 @@ const FloatingLayout = {
    * @param {Node[]} nodes
    */
   floatRight: ( screenView: ScreenView, nodes: Node[] ) => {
-    screenView.visibleBoundsProperty.link( visibleBounds => {
+    screenView.visibleBoundsProperty.link( ( visibleBounds: Bounds2 ) => {
 
       // Let the panels move to the right, but not too far
       const right = Math.min( visibleBounds.right - leftRightPadding, screenView.layoutBounds.width * ( 1 + floatFraction ) );
@@ -45,7 +46,7 @@ const FloatingLayout = {
    * @param {number} delta
    */
   floatLeft: ( screenView: ScreenView, nodes: Node[], delta: number = 0 ) => {
-    screenView.visibleBoundsProperty.link( visibleBounds => {
+    screenView.visibleBoundsProperty.link( ( visibleBounds: Bounds2 ) => {
 
       // Let the panels move to the left, but not too far
       const left = Math.max( visibleBounds.left + leftRightPadding, -screenView.layoutBounds.width * floatFraction );
@@ -62,7 +63,7 @@ const FloatingLayout = {
    * @param {Node[]} nodes
    */
   floatTop: ( screenView: ScreenView, nodes: Node[] ) => {
-    screenView.visibleBoundsProperty.link( visibleBounds => {
+    screenView.visibleBoundsProperty.link( ( visibleBounds: Bounds2 ) => {
 
       // Let the panels move to the top, but not too far
       const top = Math.max( visibleBounds.top + topBottomPadding, -screenView.layoutBounds.width * floatFraction );
@@ -79,7 +80,7 @@ const FloatingLayout = {
    * @param {Node[]} nodes
    */
   floatBottom: ( screenView: ScreenView, nodes: Node[] ) => {
-    screenView.visibleBoundsProperty.link( visibleBounds => {
+    screenView.visibleBoundsProperty.link( ( visibleBounds: Bounds2 ) => {
 
       // Let the panels move to the bottom, but not too far
       const bottom = Math.min( visibleBounds.bottom - topBottomPadding, screenView.layoutBounds.width * ( 1 + floatFraction ) );

js/common/view/IntensityMeterNode.ts

@@ -132,11 +132,11 @@ class IntensityMeterNode extends Node {
       }
     );
 
-    intensityMeter.sensorPositionProperty.link( sensorPosition => {
+    intensityMeter.sensorPositionProperty.link( ( sensorPosition: Vector2 ) => {
       this.probeNode.translation = modelViewTransform.modelToViewPosition( sensorPosition );
     } );
 
-    intensityMeter.bodyPositionProperty.link( bodyPosition => {
+    intensityMeter.bodyPositionProperty.link( ( bodyPosition: Vector2 ) => {
       this.bodyNode.translation = modelViewTransform.modelToViewPosition( bodyPosition );
     } );
 

js/common/view/LaserNode.ts

@@ -23,6 +23,7 @@ import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransfo
 import Laser from '../model/Laser.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import SceneryEvent from '../../../../scenery/js/input/SceneryEvent.js';
+import Bounds2 from '../../../../dot/js/Bounds2.js';
 
 type LaserNodeOptions = {
   tandem: Tandem
@@ -46,8 +47,8 @@ class LaserNode extends Node {
    *                                      there
    * @param {Object} [options?]
    */
-  constructor( modelViewTransform: ModelViewTransform2, laser: Laser, showRotationDragHandlesProperty: Property, showTranslationDragHandlesProperty: Property,
-               clampDragAngle: ( n: number ) => number, hasKnob: boolean, dragBoundsProperty: Property, occlusionHandler: ( laserNode: LaserNode ) => void,
+  constructor( modelViewTransform: ModelViewTransform2, laser: Laser, showRotationDragHandlesProperty: Property<boolean>, showTranslationDragHandlesProperty: Property<boolean>,
+               clampDragAngle: ( n: number ) => number, hasKnob: boolean, dragBoundsProperty: Property<Bounds2>, occlusionHandler: ( laserNode: LaserNode ) => void,
                options?: Partial<LaserNodeOptions> ) {
 
     const filledOptions = merge( { tandem: Tandem.OPTIONAL }, options ) as LaserNodeOptions;
@@ -84,8 +85,8 @@ class LaserNode extends Node {
 
     // When mousing over or starting to drag the laser, increment the over count.  If it is more than zero
     // then show the drag handles.  This ensures they will be shown whenever dragging or over, and they won't flicker
-    const overCountProperty = new Property( 0 );
-    overCountProperty.link( overCount => showRotationDragHandlesProperty.set( overCount > 0 ) );
+    const overCountProperty = new Property<number>( 0 );
+    overCountProperty.link( ( overCount: number ) => showRotationDragHandlesProperty.set( overCount > 0 ) );
 
     super( merge( { cursor: 'pointer' }, options ) );
 
@@ -103,7 +104,7 @@ class LaserNode extends Node {
     const emissionPointEndPosition = new Vector2( 0, 0 );
 
     // When the window reshapes, make sure the laser remains in the play area
-    dragBoundsProperty.link( dragBounds => {
+    dragBoundsProperty.link( ( dragBounds: Bounds2 ) => {
       const center = laser.emissionPointProperty.value;
       const eroded = dragBounds.erodedXY( lightImageHeight / 2, lightImageHeight / 2 );
 
@@ -178,7 +179,7 @@ class LaserNode extends Node {
         phetioDocumentation: 'This Property determines whether the laser can be translated, in the "Prisms" screen only. ' +
                              'A value of false means the laser cannot be translated, though it may still be rotatable.'
       } );
-      isTranslationEnabledProperty.lazyLink( isEnabled => {
+      isTranslationEnabledProperty.lazyLink( ( isEnabled: boolean ) => {
         if ( isEnabled ) {
           laserPointerNode.addInputListener( translationListener );
           laserPointerNode.addInputListener( translationOverListener );
@@ -242,7 +243,7 @@ class LaserNode extends Node {
                            'the rotation knob on the back of the laser and makes it non-rotatable (though it may still ' +
                            'be translatable).'
     } );
-    isRotationEnabledProperty.lazyLink( isEnabled => {
+    isRotationEnabledProperty.lazyLink( ( isEnabled: boolean ) => {
       if ( isEnabled ) {
         rotationTarget.addInputListener( rotationListener );
         rotationTarget.addInputListener( rotationOverListener );
@@ -257,7 +258,7 @@ class LaserNode extends Node {
     } );
 
     // update the laser position
-    laser.emissionPointProperty.link( newEmissionPoint => {
+    laser.emissionPointProperty.link( ( newEmissionPoint: Vector2 ) => {
       const emissionPointX = modelViewTransform.modelToViewX( newEmissionPoint.x );
       const emissionPointY = modelViewTransform.modelToViewY( newEmissionPoint.y );
       this.setTranslation( emissionPointX, emissionPointY );

js/common/view/MediumControlPanel.ts

@@ -53,9 +53,9 @@ type MediumControlPanelOptions = {
 
 class MediumControlPanel extends Node {
   private readonly mediumColorFactory: MediumColorFactory;
-  private readonly mediumProperty: Property;
-  private readonly laserWavelengthProperty: Property;
-  private readonly mediumIndexProperty: Property;
+  private readonly mediumProperty: Property<Medium>;
+  private readonly laserWavelengthProperty: Property<number>;
+  private readonly mediumIndexProperty: Property<number>;
 
   /**
    * @param {BendingLightScreenView} view - view of the simulation
@@ -67,7 +67,7 @@ class MediumControlPanel extends Node {
    * @param {number} decimalPlaces - decimalPlaces to show for index of refraction
    * @param {Object} [options] - options that can be passed on to the underlying node
    */
-  constructor( view: BendingLightScreenView, mediumColorFactory: MediumColorFactory, mediumProperty: Property, name: string, textFieldVisible: boolean, laserWavelength: Property,
+  constructor( view: BendingLightScreenView, mediumColorFactory: MediumColorFactory, mediumProperty: Property<Medium>, name: string, textFieldVisible: boolean, laserWavelength: Property<number>,
                decimalPlaces: number, options?: Partial<MediumControlPanelOptions> ) {
 
     super();
@@ -336,7 +336,7 @@ class MediumControlPanel extends Node {
       }
       updateComboBox();
     } );
-    comboBoxSubstanceProperty.link( selected => {
+    comboBoxSubstanceProperty.link( ( selected: Substance ) => {
       if ( !selected.custom ) {
         this.setSubstance( selected );
       }

js/common/view/MediumNode.ts

@@ -11,14 +11,15 @@ import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransfo
 import Node from '../../../../scenery/js/nodes/Node.js';
 import Path from '../../../../scenery/js/nodes/Path.js';
 import bendingLight from '../../bendingLight.js';
+import Medium from '../model/Medium.js';
 
 class MediumNode extends Node {
 
   /**
    * @param {ModelViewTransform2} modelViewTransform - converts between model and view co-ordinates
    * @param {Property.<Medium>} mediumProperty - specifies medium
    */
-  constructor( modelViewTransform: ModelViewTransform2, mediumProperty: Property ) {
+  constructor( modelViewTransform: ModelViewTransform2, mediumProperty: Property<Medium> ) {
     super( { pickable: false } ); // user can't interact with the medium except through control panels.
 
     // add the shape that paints the medium
@@ -29,7 +30,7 @@ class MediumNode extends Node {
     this.addChild( mediumRectangleNode );
 
     // Update whenever the medium changes
-    mediumProperty.link( medium => {
+    mediumProperty.link( (medium:Medium) => {
       // @ts-ignore
       mediumRectangleNode.fill = medium.color;
     } );

js/common/view/RotationDragHandle.ts

@@ -31,7 +31,7 @@ class RotationDragHandle extends Node {
    * @param {number} rotationArrowAngleOffset - for unknown reasons the rotation arrows are off by PI/4 on the
    *                                            intro/more-tools screen, so account for that here.
    */
-  constructor( modelViewTransform: ModelViewTransform2, laser: Laser, deltaAngle: number, showDragHandlesProperty: Property, notAtMax: ( n: number ) => boolean,
+  constructor( modelViewTransform: ModelViewTransform2, laser: Laser, deltaAngle: number, showDragHandlesProperty: Property<boolean>, notAtMax: ( n: number ) => boolean,
                laserImageWidth: number, rotationArrowAngleOffset: number ) {
 
     super();

js/common/view/TranslationDragHandle.ts

@@ -27,7 +27,7 @@ class TranslationDragHandle extends Node {
    * @param {number} laserImageWidth - width of the laser
    * @constructor
    */
-  constructor( modelViewTransform: ModelViewTransform2, laser: Laser, dx: number, dy: number, showDragHandlesProperty: Property, laserImageWidth: number ) {
+  constructor( modelViewTransform: ModelViewTransform2, laser: Laser, dx: number, dy: number, showDragHandlesProperty: Property<boolean>, laserImageWidth: number ) {
 
     super();