From 4328f46c29ead447b91bbadfaf412b7b765828f9 Mon Sep 17 00:00:00 2001
From: Jonathan Olson <jonathan.olson@colorado.edu>
Date: Sat, 5 Mar 2022 13:50:42 -0700
Subject: [PATCH] TypeScript conversion for Panel, ComboBox (and assorted
 types), see https://github.com/phetsims/scenery-phet/issues/726

---
 js/create/view/TickMarkRangeComboBoxNode.ts    | 15 ++++++++-------
 js/discover/view/ChallengeComboBoxItem.ts      |  2 +-
 js/discover/view/ChallengeRatioComboBoxNode.ts |  2 +-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/js/create/view/TickMarkRangeComboBoxNode.ts b/js/create/view/TickMarkRangeComboBoxNode.ts
index a6993045..090c5cca 100644
--- a/js/create/view/TickMarkRangeComboBoxNode.ts
+++ b/js/create/view/TickMarkRangeComboBoxNode.ts
@@ -23,19 +23,19 @@ import TickMarkView from '../../common/view/TickMarkView.js';
 import ratioAndProportion from '../../ratioAndProportion.js';
 import ratioAndProportionStrings from '../../ratioAndProportionStrings.js';
 import EnumerationProperty from '../../../../axon/js/EnumerationProperty.js';
-import IProperty from '../../../../axon/js/IProperty.js';
+import Property from '../../../../axon/js/Property.js';
 
 const TICK_MARK_RANGE_FONT = new PhetFont( 16 );
 const RANGE_TEXT_OPTIONS = { font: TICK_MARK_RANGE_FONT };
 
 class TickMarkRangeComboBoxNode extends Node {
 
-  private enabledComboBox: ComboBox;
-  private disabledComboBox: ComboBox;
+  private enabledComboBox: ComboBox<number>;
+  private disabledComboBox: ComboBox<true | number>;
   private tickMarkRangeMap: Record<number, string>;
-  private tickMarkRangeProperty: IProperty<number>
+  private tickMarkRangeProperty: Property<number>
 
-  constructor( tickMarkRangeProperty: IProperty<number>, comboBoxParent: Node,
+  constructor( tickMarkRangeProperty: Property<number>, comboBoxParent: Node,
                tickMarkViewProperty: EnumerationProperty<TickMarkView> ) {
     super();
 
@@ -78,10 +78,11 @@ class TickMarkRangeComboBoxNode extends Node {
 
     const value = true;
 
-    this.disabledComboBox = new ComboBox( [
+    // NOTE: The values are [ 10, true ]... so it's typed interestingly.
+    this.disabledComboBox = new ComboBox<true | number>( [
       new ComboBoxItem( new HSeparator( widestItem, { centerY: -5 } ), value, { a11yLabel: ratioAndProportionStrings.a11y.tickMark.tickMarksHidden } ),
       items[ 0 ] // add this one to get the proper height of the text.
-    ], new BooleanProperty( value ), new Node(), comboBoxOptions );
+    ], new BooleanProperty( value ) as Property<true | number>, new Node(), comboBoxOptions );
 
     // always disabled
     this.disabledComboBox.enabledProperty.value = false;
diff --git a/js/discover/view/ChallengeComboBoxItem.ts b/js/discover/view/ChallengeComboBoxItem.ts
index 861a9f55..1317a229 100644
--- a/js/discover/view/ChallengeComboBoxItem.ts
+++ b/js/discover/view/ChallengeComboBoxItem.ts
@@ -12,7 +12,7 @@ import ratioAndProportion from '../../ratioAndProportion.js';
 import NumberProperty from '../../../../axon/js/NumberProperty.js';
 import Property from '../../../../axon/js/Property.js';
 
-class ChallengeComboBoxItem extends ComboBoxItem {
+class ChallengeComboBoxItem extends ComboBoxItem<number> {
 
   constructor( text: string, color: Color | string, value: number, valueProperty: NumberProperty,
                colorProperty: Property<Color | string>, options?: any ) {
diff --git a/js/discover/view/ChallengeRatioComboBoxNode.ts b/js/discover/view/ChallengeRatioComboBoxNode.ts
index 40d0d97d..4a19aad4 100644
--- a/js/discover/view/ChallengeRatioComboBoxNode.ts
+++ b/js/discover/view/ChallengeRatioComboBoxNode.ts
@@ -31,7 +31,7 @@ class ChallengeRatioComboBoxNode extends Node {
 
   // Used to get the names of challenges based on the target ratio, NOTE: lowercase strings are only available in the PDOM (not yet i18n)
   readonly ratioToChallengeNameMap: Map<number, { capitalized: string, lowercase: string }>;
-  private comboBox: ComboBox;
+  private comboBox: ComboBox<number>;
 
   /**
    * @param targetRatioProperty