feat(switch): Convert JS to TypeScript (#4320)

Author: mmalerba

packages/material-components-web/index.js

@@ -45,7 +45,7 @@ import * as select from '@material/select/index';
 import * as selectionControl from '@material/selection-control/index.ts';
 import * as slider from '@material/slider/index';
 import * as snackbar from '@material/snackbar/index';
-import * as switchControl from '@material/switch/index';
+import * as switchControl from '@material/switch/index.ts';
 import * as tab from '@material/tab/index';
 import * as tabBar from '@material/tab-bar/index';
 import * as tabIndicator from '@material/tab-indicator/index';

packages/mdc-base/component.ts

@@ -114,4 +114,4 @@ class MDCComponent<FoundationType extends MDCFoundation> {
   }
 }
 
-export default MDCComponent;
+export {MDCComponent as default, MDCComponent};

packages/mdc-base/foundation.ts

@@ -62,4 +62,4 @@ class MDCFoundation<AdapterType extends {} = {}> {
   }
 }
 
-export default MDCFoundation;
+export {MDCFoundation as default, MDCFoundation};

packages/mdc-switch/README.md

@@ -162,7 +162,7 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 | `handleChange(evt: Event) => void` | Handles a change event from the native control. |
 
 ### `MDCSwitchFoundation` Event Handlers
-If wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [MDCSwitch](index.js) component `initialSyncWithDOM` method.
+If wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [MDCSwitch](index.ts) component `initialSyncWithDOM` method.
 
 | Event | Element Selector | Foundation Handler |
 | --- | --- | --- |

packages/mdc-switch/adapter.js renamed to packages/mdc-switch/adapter.ts

@@ -21,35 +21,28 @@
  * THE SOFTWARE.
  */
 
-/* eslint no-unused-vars: [2, {"args": "none"}] */
-
 /**
  * Adapter for MDC Switch. Provides an interface for managing
  * - classes
  * - dom
  *
- * Additionally, provides type information for the adapter to the Closure
- * compiler.
- *
  * Implement this adapter for your framework of choice to delegate updates to
  * the component in your framework of choice. See architecture documentation
  * for more details.
  * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
- *
- * @record
  */
-class MDCSwitchAdapter {
-  /** @param {string} className */
-  addClass(className) {}
+interface MDCSwitchAdapter {
+  /** Adds a CSS class to the root element. */
+  addClass(className: string): void;
 
-  /** @param {string} className */
-  removeClass(className) {}
+  /** Removes a CSS class from the root element. */
+  removeClass(className: string): void;
 
-  /** @param {boolean} checked */
-  setNativeControlChecked(checked) {}
+  /** Sets checked state of the native HTML control underlying the switch. */
+  setNativeControlChecked(checked: boolean): void;
 
-  /** @param {boolean} disabled */
-  setNativeControlDisabled(disabled) {}
+  /** Sets the disabled state of the native HTML control underlying the switch. */
+  setNativeControlDisabled(disabled: boolean): void;
 }
 
-export default MDCSwitchAdapter;
+export {MDCSwitchAdapter as default, MDCSwitchAdapter};

packages/mdc-switch/constants.js renamed to packages/mdc-switch/constants.ts

@@ -21,17 +21,20 @@
  * THE SOFTWARE.
  */
 
-/** @enum {string} */
+/** CSS classes used by the switch. */
 const cssClasses = {
+  /** Class used for a switch that is in the "checked" (on) position. */
   CHECKED: 'mdc-switch--checked',
+  /** Class used for a switch that is disabled. */
   DISABLED: 'mdc-switch--disabled',
 };
 
-/** @enum {string} */
+/** String constants used by the switch. */
 const strings = {
+  /** A CSS selector used to locate the native HTML control for the switch.  */
   NATIVE_CONTROL_SELECTOR: '.mdc-switch__native-control',
+  /** A CSS selector used to locate the ripple surface element for the switch. */
   RIPPLE_SURFACE_SELECTOR: '.mdc-switch__thumb-underlay',
 };
 
-
 export {cssClasses, strings};

packages/mdc-switch/foundation.js renamed to packages/mdc-switch/foundation.ts

@@ -21,47 +21,49 @@
  * THE SOFTWARE.
  */
 
-import MDCFoundation from '@material/base/foundation';
-import MDCSwitchAdapter from './adapter';
-/* eslint-enable no-unused-vars */
+import {MDCFoundation} from '@material/base/foundation';
+import {MDCSwitchAdapter} from './adapter';
 import {cssClasses, strings} from './constants';
 
 /**
- * @extends {MDCFoundation<!MDCSwitchAdapter>}
+ * Foundation for the MDC Switch. Encapsulates business logic for the switch.
+ *
+ * See architecture documentation for more details.
+ * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
  */
-class MDCSwitchFoundation extends MDCFoundation {
-  /** @return enum {string} */
+class MDCSwitchFoundation extends MDCFoundation<MDCSwitchAdapter> {
+  /** The string constants used by the switch. */
   static get strings() {
     return strings;
   }
 
-  /** @return enum {string} */
+  /** The CSS classes used by the switch. */
   static get cssClasses() {
     return cssClasses;
   }
 
-  /** @return {!MDCSwitchAdapter} */
-  static get defaultAdapter() {
-    return /** @type {!MDCSwitchAdapter} */ ({
-      addClass: (/* className: string */) => {},
-      removeClass: (/* className: string */) => {},
-      setNativeControlChecked: (/* checked: boolean */) => {},
-      setNativeControlDisabled: (/* disabled: boolean */) => {},
-    });
+  /** The default Adapter for the switch. */
+  static get defaultAdapter(): MDCSwitchAdapter {
+    return {
+      addClass: () => undefined,
+      removeClass: () => undefined,
+      setNativeControlChecked: () => undefined,
+      setNativeControlDisabled: () => undefined,
+    };
   }
 
-  constructor(adapter) {
+  constructor(adapter: MDCSwitchAdapter) {
     super(Object.assign(MDCSwitchFoundation.defaultAdapter, adapter));
   }
 
-  /** @param {boolean} checked */
-  setChecked(checked) {
+  /** Sets the checked state of the switch. */
+  setChecked(checked: boolean) {
     this.adapter_.setNativeControlChecked(checked);
     this.updateCheckedStyling_(checked);
   }
 
-  /** @param {boolean} disabled */
-  setDisabled(disabled) {
+  /** Sets the disabled state of the switch. */
+  setDisabled(disabled: boolean) {
     this.adapter_.setNativeControlDisabled(disabled);
     if (disabled) {
       this.adapter_.addClass(cssClasses.DISABLED);
@@ -70,20 +72,14 @@ class MDCSwitchFoundation extends MDCFoundation {
     }
   }
 
-  /**
-   * Handles the change event for the switch native control.
-   * @param {!Event} evt
-   */
-  handleChange(evt) {
-    this.updateCheckedStyling_(evt.target.checked);
+  /** Handles the change event for the switch native control. */
+  handleChange(evt: Event) {
+    const nativeControl = evt.target as HTMLInputElement;
+    this.updateCheckedStyling_(nativeControl.checked);
   }
 
-  /**
-   * Updates the styling of the switch based on its checked state.
-   * @param {boolean} checked
-   * @private
-   */
-  updateCheckedStyling_(checked) {
+  /** Updates the styling of the switch based on its checked state. */
+  private updateCheckedStyling_(checked: boolean) {
     if (checked) {
       this.adapter_.addClass(cssClasses.CHECKED);
     } else {
@@ -92,4 +88,4 @@ class MDCSwitchFoundation extends MDCFoundation {
   }
 }
 
-export default MDCSwitchFoundation;
+export {MDCSwitchFoundation as default, MDCSwitchFoundation};

packages/mdc-switch/index.js renamed to packages/mdc-switch/index.ts

@@ -21,32 +21,30 @@
  * THE SOFTWARE.
  */
 
-import MDCComponent from '@material/base/component';
-/* eslint-disable no-unused-vars */
-import {MDCSelectionControlState, MDCSelectionControl} from '@material/selection-control/index';
-/* eslint-enable no-unused-vars */
-import MDCSwitchFoundation from './foundation';
-import {MDCRipple, MDCRippleFoundation} from '@material/ripple/index';
+import {MDCComponent} from '@material/base/component';
+import {MDCRipple, MDCRippleFoundation, RippleCapableSurface} from '@material/ripple/index';
 import {getMatchesProperty} from '@material/ripple/util';
+import {MDCSelectionControl} from '@material/selection-control/index';
+import {MDCSwitchFoundation} from './foundation';
 
 /**
- * @extends MDCComponent<!MDCSwitchFoundation>
- * @implements {MDCSelectionControl}
+ * An implementation of the switch component defined by the Material Design spec.
+ *
+ * https://material.io/design/components/selection-controls.html#switches
  */
-class MDCSwitch extends MDCComponent {
-  static attachTo(root) {
+class MDCSwitch extends MDCComponent<MDCSwitchFoundation> implements MDCSelectionControl, RippleCapableSurface {
+  /** Creates an instance of MDCSwitch bound to the given root element. */
+  static attachTo(root: HTMLElement) {
     return new MDCSwitch(root);
   }
 
-  constructor(...args) {
-    super(...args);
+  // Initialized in super class constructor, re-declared as public to fulfill to the `RippleCapableSurface` interface.
+  root_!: Element;
 
-    /** @private {!MDCRipple} */
-    this.ripple_ = this.initRipple_();
+  private ripple_ = this.initRipple_();
 
-    /** @private {!Function} */
-    this.changeHandler_;
-  }
+  // Initialized in `initialSyncWithDOM`.
+  private changeHandler_!: EventListener;
 
   destroy() {
     super.destroy();
@@ -55,7 +53,7 @@ class MDCSwitch extends MDCComponent {
   }
 
   initialSyncWithDOM() {
-    this.changeHandler_ = this.foundation_.handleChange.bind(this.foundation_);
+    this.changeHandler_ = (...args) => this.foundation_.handleChange(...args);
     this.nativeControl_.addEventListener('change', this.changeHandler_);
 
     // Sometimes the checked state of the input element is saved in the history.
@@ -64,75 +62,64 @@ class MDCSwitch extends MDCComponent {
     this.checked = this.checked;
   }
 
-  /**
-   * Returns the state of the native control element, or null if the native control element is not present.
-   * @return {?MDCSelectionControlState}
-   * @private
-   */
-  get nativeControl_() {
-    const {NATIVE_CONTROL_SELECTOR} = MDCSwitchFoundation.strings;
-    const el = /** @type {?MDCSelectionControlState} */ (
-      this.root_.querySelector(NATIVE_CONTROL_SELECTOR));
-    return el;
-  }
-
-  /**
-   * @return {!MDCRipple}
-   * @private
-   */
-  initRipple_() {
-    const {RIPPLE_SURFACE_SELECTOR} = MDCSwitchFoundation.strings;
-    const rippleSurface = /** @type {!Element} */ (this.root_.querySelector(RIPPLE_SURFACE_SELECTOR));
-
-    const MATCHES = getMatchesProperty(HTMLElement.prototype);
-    const adapter = Object.assign(MDCRipple.createAdapter(this), {
-      isUnbounded: () => true,
-      isSurfaceActive: () => this.nativeControl_[MATCHES](':active'),
-      addClass: (className) => rippleSurface.classList.add(className),
-      removeClass: (className) => rippleSurface.classList.remove(className),
-      registerInteractionHandler: (type, handler) => this.nativeControl_.addEventListener(type, handler),
-      deregisterInteractionHandler: (type, handler) => this.nativeControl_.removeEventListener(type, handler),
-      updateCssVariable: (varName, value) => rippleSurface.style.setProperty(varName, value),
-      computeBoundingRect: () => rippleSurface.getBoundingClientRect(),
-    });
-    const foundation = new MDCRippleFoundation(adapter);
-    return new MDCRipple(this.root_, foundation);
-  }
-
-  /** @return {!MDCSwitchFoundation} */
+  /** Gets the default Foundation for this switch. */
   getDefaultFoundation() {
     return new MDCSwitchFoundation({
-      addClass: (className) => this.root_.classList.add(className),
-      removeClass: (className) => this.root_.classList.remove(className),
-      setNativeControlChecked: (checked) => this.nativeControl_.checked = checked,
-      setNativeControlDisabled: (disabled) => this.nativeControl_.disabled = disabled,
+      addClass: (className: string) => this.root_.classList.add(className),
+      removeClass: (className: string) => this.root_.classList.remove(className),
+      setNativeControlChecked: (checked: boolean) => this.nativeControl_.checked = checked,
+      setNativeControlDisabled: (disabled: boolean) => this.nativeControl_.disabled = disabled,
     });
   }
 
-  /** @return {!MDCRipple} */
+  /** The MDCRipple associated with this switch. */
   get ripple() {
     return this.ripple_;
   }
 
-  /** @return {boolean} */
+  /** The checked state of this switch. */
   get checked() {
     return this.nativeControl_.checked;
   }
-
-  /** @param {boolean} checked */
   set checked(checked) {
     this.foundation_.setChecked(checked);
   }
 
-  /** @return {boolean} */
+  /** The disabled state of this switch. */
   get disabled() {
     return this.nativeControl_.disabled;
   }
-
-  /** @param {boolean} disabled */
   set disabled(disabled) {
     this.foundation_.setDisabled(disabled);
   }
+
+  private initRipple_() {
+    const {RIPPLE_SURFACE_SELECTOR} = MDCSwitchFoundation.strings;
+    const rippleSurface = this.root_.querySelector(RIPPLE_SURFACE_SELECTOR) as HTMLElement;
+
+    const MATCHES = getMatchesProperty(HTMLElement.prototype);
+    const adapter = Object.assign(MDCRipple.createAdapter(this), {
+      addClass: (className: string) => rippleSurface.classList.add(className),
+      computeBoundingRect: () => rippleSurface.getBoundingClientRect(),
+      deregisterInteractionHandler: (type: string, handler: EventListener) =>
+          this.nativeControl_.removeEventListener(type, handler),
+      isSurfaceActive: () => this.nativeControl_[MATCHES]!(':active'),
+      isUnbounded: () => true,
+      registerInteractionHandler: (type: string, handler: EventListener) =>
+          this.nativeControl_.addEventListener(type, handler),
+      removeClass: (className: string) => rippleSurface.classList.remove(className),
+      updateCssVariable: (varName: string, value: string) =>
+          rippleSurface.style.setProperty(varName, value),
+    });
+    const foundation = new MDCRippleFoundation(adapter);
+    return new MDCRipple(this.root_, foundation);
+  }
+
+  /** Returns the state of the native control element. */
+  private get nativeControl_() {
+    const {NATIVE_CONTROL_SELECTOR} = MDCSwitchFoundation.strings;
+    return this.root_.querySelector(NATIVE_CONTROL_SELECTOR) as HTMLInputElement;
+  }
 }
 
 export {MDCSwitchFoundation, MDCSwitch};

scripts/webpack/js-bundle-factory.js

@@ -177,7 +177,7 @@ class JsBundleFactory {
         selectionControl: getAbsolutePath('/packages/mdc-selection-control/index.ts'),
         slider: getAbsolutePath('/packages/mdc-slider/index.js'),
         snackbar: getAbsolutePath('/packages/mdc-snackbar/index.js'),
-        switch: getAbsolutePath('/packages/mdc-switch/index.js'),
+        switch: getAbsolutePath('/packages/mdc-switch/index.ts'),
         tab: getAbsolutePath('/packages/mdc-tab/index.js'),
         tabBar: getAbsolutePath('/packages/mdc-tab-bar/index.js'),
         tabIndicator: getAbsolutePath('/packages/mdc-tab-indicator/index.js'),

test/unit/mdc-switch/foundation.test.js

@@ -24,7 +24,7 @@
 import {assert} from 'chai';
 import td from 'testdouble';
 
-import MDCSwitchFoundation from '../../../packages/mdc-switch/foundation';
+import {MDCSwitchFoundation} from '../../../packages/mdc-switch/foundation';
 
 suite('MDCSwitchFoundation');