feat(checkbox): typescript conversion (#4319)

refs #4225

Author: Matt Goo

package.json

@@ -17,7 +17,7 @@
     "fix": "npm-run-all --parallel fix:*",
     "lint:css": "stylelint \"packages/**/*.scss\" && stylelint --config=test/screenshot/.stylelintrc.yaml \"test/screenshot/**/*.scss\"",
     "lint:js": "eslint packages test scripts webpack.config.js demos/webpack.config.js karma.conf.js",
-    "lint:ts": "tslint \"packages/**/*.ts\" \"test/**/*.ts\" \"scripts/**/*.ts\"",
+    "lint:ts": "tslint --exclude \"test/**/*.d.ts\" \"packages/**/*.ts\" \"test/**/*.ts\" \"scripts/**/*.ts\"",
     "lint:html": "find test/screenshot/spec/ -name '*.html' | grep -v 'index.html$' | xargs htmllint",
     "lint:imports": "node scripts/check-imports.js",
     "lint": "npm-run-all --parallel lint:*",

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

@@ -21,11 +21,6 @@
  * THE SOFTWARE.
  */
 
-/* eslint-disable no-unused-vars */
-import {MDCSelectionControlState} from '@material/selection-control/index';
-
-/* eslint no-unused-vars: [2, {"args": "none"}] */
-
 /**
  * Adapter for MDC Checkbox. Provides an interface for managing
  * - classes
@@ -42,42 +37,24 @@ import {MDCSelectionControlState} from '@material/selection-control/index';
  *
  * @record
  */
-class MDCCheckboxAdapter {
-  /** @param {string} className */
-  addClass(className) {}
-
-  /** @param {string} className */
-  removeClass(className) {}
 
+interface MDCCheckboxAdapter {
+  addClass(className: string): void;
+  forceLayout(): void;
+  hasNativeControl(): boolean;
+  isAttachedToDOM(): boolean;
+  isChecked(): boolean;
+  isIndeterminate(): boolean;
+  removeClass(className: string): void;
   /**
-   * Sets an attribute with a given value on the input element.
-   * @param {string} attr
-   * @param {string} value
+   * Removes an attribute from the input element.
    */
-  setNativeControlAttr(attr, value) {}
-
+  removeNativeControlAttr(attr: string): void;
   /**
-   * Removes an attribute from the input element.
-   * @param {string} attr
+   * Sets an attribute with a given value on the input element.
    */
-  removeNativeControlAttr(attr) {}
-
-  forceLayout() {}
-
-  /** @return {boolean} */
-  isAttachedToDOM() {}
-
-  /** @return {boolean} */
-  isIndeterminate() {}
-
-  /** @return {boolean} */
-  isChecked() {}
-
-  /** @return {boolean} */
-  hasNativeControl() {}
-
-  /** @param {boolean} disabled */
-  setNativeControlDisabled(disabled) {}
+  setNativeControlAttr(attr: string, value: string): void;
+  setNativeControlDisabled(disabled: boolean): void;
 }
 
 export default MDCCheckboxAdapter;

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

@@ -21,35 +21,31 @@
  * THE SOFTWARE.
  */
 
-/** @const {string} */
 const ROOT = 'mdc-checkbox';
 
-/** @enum {string} */
 const cssClasses = {
-  UPGRADED: 'mdc-checkbox--upgraded',
-  CHECKED: 'mdc-checkbox--checked',
-  INDETERMINATE: 'mdc-checkbox--indeterminate',
-  DISABLED: 'mdc-checkbox--disabled',
-  ANIM_UNCHECKED_CHECKED: 'mdc-checkbox--anim-unchecked-checked',
-  ANIM_UNCHECKED_INDETERMINATE: 'mdc-checkbox--anim-unchecked-indeterminate',
-  ANIM_CHECKED_UNCHECKED: 'mdc-checkbox--anim-checked-unchecked',
   ANIM_CHECKED_INDETERMINATE: 'mdc-checkbox--anim-checked-indeterminate',
+  ANIM_CHECKED_UNCHECKED: 'mdc-checkbox--anim-checked-unchecked',
   ANIM_INDETERMINATE_CHECKED: 'mdc-checkbox--anim-indeterminate-checked',
   ANIM_INDETERMINATE_UNCHECKED: 'mdc-checkbox--anim-indeterminate-unchecked',
+  ANIM_UNCHECKED_CHECKED: 'mdc-checkbox--anim-unchecked-checked',
+  ANIM_UNCHECKED_INDETERMINATE: 'mdc-checkbox--anim-unchecked-indeterminate',
+  CHECKED: 'mdc-checkbox--checked',
+  DISABLED: 'mdc-checkbox--disabled',
+  INDETERMINATE: 'mdc-checkbox--indeterminate',
+  UPGRADED: 'mdc-checkbox--upgraded',
 };
 
-/** @enum {string} */
 const strings = {
+  ARIA_CHECKED_ATTR: 'aria-checked',
+  ARIA_CHECKED_INDETERMINATE_VALUE: 'mixed',
   NATIVE_CONTROL_SELECTOR: `.${ROOT}__native-control`,
-  TRANSITION_STATE_INIT: 'init',
   TRANSITION_STATE_CHECKED: 'checked',
-  TRANSITION_STATE_UNCHECKED: 'unchecked',
   TRANSITION_STATE_INDETERMINATE: 'indeterminate',
-  ARIA_CHECKED_ATTR: 'aria-checked',
-  ARIA_CHECKED_INDETERMINATE_VALUE: 'mixed',
+  TRANSITION_STATE_INIT: 'init',
+  TRANSITION_STATE_UNCHECKED: 'unchecked',
 };
 
-/** @enum {number} */
 const numbers = {
   ANIM_END_LATCH_MS: 250,
 };

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

@@ -22,77 +22,57 @@
  */
 
 import MDCFoundation from '@material/base/foundation';
-/* eslint-disable no-unused-vars */
-import {MDCSelectionControlState} from '@material/selection-control/index';
 import MDCCheckboxAdapter from './adapter';
-/* eslint-enable no-unused-vars */
-import {cssClasses, strings, numbers} from './constants';
+import {cssClasses, numbers, strings} from './constants';
 
-/**
- * @extends {MDCFoundation<!MDCCheckboxAdapter>}
- */
-class MDCCheckboxFoundation extends MDCFoundation {
-  /** @return enum {cssClasses} */
+class MDCCheckboxFoundation extends MDCFoundation<MDCCheckboxAdapter> {
   static get cssClasses() {
     return cssClasses;
   }
 
-  /** @return enum {strings} */
   static get strings() {
     return strings;
   }
 
-  /** @return enum {numbers} */
   static get numbers() {
     return numbers;
   }
 
-  /** @return {!MDCCheckboxAdapter} */
-  static get defaultAdapter() {
-    return /** @type {!MDCCheckboxAdapter} */ ({
-      addClass: (/* className: string */) => {},
-      removeClass: (/* className: string */) => {},
-      setNativeControlAttr: (/* attr: string, value: string */) => {},
-      removeNativeControlAttr: (/* attr: string */) => {},
-      forceLayout: () => {},
-      isAttachedToDOM: () => /* boolean */ {},
-      isIndeterminate: () => /* boolean */ {},
-      isChecked: () => /* boolean */ {},
-      hasNativeControl: () => /* boolean */ {},
-      setNativeControlDisabled: (/* disabled: boolean */) => {},
-    });
+  static get defaultAdapter(): MDCCheckboxAdapter {
+    return {
+      addClass: () => undefined,
+      forceLayout: () => undefined,
+      hasNativeControl: () => false,
+      isAttachedToDOM: () => false,
+      isChecked: () => false,
+      isIndeterminate: () => false,
+      removeClass: () => undefined,
+      removeNativeControlAttr: () => undefined,
+      setNativeControlAttr: () => undefined,
+      setNativeControlDisabled: () => undefined,
+    };
   }
 
-  constructor(adapter) {
-    super(Object.assign(MDCCheckboxFoundation.defaultAdapter, adapter));
-
-    /** @private {string} */
-    this.currentCheckState_ = strings.TRANSITION_STATE_INIT;
-
-    /** @private {string} */
-    this.currentAnimationClass_ = '';
-
-    /** @private {number} */
-    this.animEndLatchTimer_ = 0;
+  private currentCheckState_ = strings.TRANSITION_STATE_INIT;
+  private currentAnimationClass_ = '';
+  private animEndLatchTimer_ = 0;
+  private enableAnimationEndHandler_ = false;
 
-    /** @private {boolean} */
-    this.enableAnimationEndHandler_ = false;
+  constructor(adapter: MDCCheckboxAdapter) {
+    super(Object.assign(MDCCheckboxFoundation.defaultAdapter, adapter));
   }
 
-  /** @override */
   init() {
     this.currentCheckState_ = this.determineCheckState_();
     this.updateAriaChecked_();
     this.adapter_.addClass(cssClasses.UPGRADED);
   }
 
-  /** @override */
   destroy() {
     clearTimeout(this.animEndLatchTimer_);
   }
 
-  /** @param {boolean} disabled */
-  setDisabled(disabled) {
+  setDisabled(disabled: boolean) {
     this.adapter_.setNativeControlDisabled(disabled);
     if (disabled) {
       this.adapter_.addClass(cssClasses.DISABLED);
@@ -122,8 +102,7 @@ class MDCCheckboxFoundation extends MDCFoundation {
     this.transitionCheckState_();
   }
 
-  /** @private */
-  transitionCheckState_() {
+  private transitionCheckState_() {
     if (!this.adapter_.hasNativeControl()) {
       return;
     }
@@ -155,11 +134,7 @@ class MDCCheckboxFoundation extends MDCFoundation {
     }
   }
 
-  /**
-   * @return {string}
-   * @private
-   */
-  determineCheckState_() {
+  private determineCheckState_(): string {
     const {
       TRANSITION_STATE_INDETERMINATE,
       TRANSITION_STATE_CHECKED,
@@ -172,12 +147,7 @@ class MDCCheckboxFoundation extends MDCFoundation {
     return this.adapter_.isChecked() ? TRANSITION_STATE_CHECKED : TRANSITION_STATE_UNCHECKED;
   }
 
-  /**
-   * @param {string} oldState
-   * @param {string} newState
-   * @return {string}
-   */
-  getTransitionAnimationClass_(oldState, newState) {
+  private getTransitionAnimationClass_(oldState: string, newState: string): string {
     const {
       TRANSITION_STATE_INIT,
       TRANSITION_STATE_CHECKED,
@@ -194,6 +164,7 @@ class MDCCheckboxFoundation extends MDCFoundation {
     } = MDCCheckboxFoundation.cssClasses;
 
     switch (oldState) {
+    // @ts-ignore:no-switch-case-fall-through already existing fallthrough
     case TRANSITION_STATE_INIT:
       if (newState === TRANSITION_STATE_UNCHECKED) {
         return '';
@@ -210,7 +181,7 @@ class MDCCheckboxFoundation extends MDCFoundation {
     }
   }
 
-  updateAriaChecked_() {
+  private updateAriaChecked_() {
     // Ensure aria-checked is set to mixed if checkbox is in indeterminate state.
     if (this.adapter_.isIndeterminate()) {
       this.adapter_.setNativeControlAttr(