feat(form-field): ts convert (#4327)

Author: Matt Goo

packages/material-components-web/index.js

@@ -29,7 +29,7 @@ import * as dialog from '@material/dialog/index';
 import * as dom from '@material/dom/index.ts';
 import * as drawer from '@material/drawer/index';
 import * as floatingLabel from '@material/floating-label/index';
-import * as formField from '@material/form-field/index';
+import * as formField from '@material/form-field/index.ts';
 import * as gridList from '@material/grid-list/index';
 import * as iconButton from '@material/icon-button/index';
 import * as iconToggle from '@material/icon-toggle/index';
@@ -42,7 +42,7 @@ import * as notchedOutline from '@material/notched-outline/index';
 import * as radio from '@material/radio/index';
 import * as ripple from '@material/ripple/index.ts';
 import * as select from '@material/select/index';
-import * as selectionControl from '@material/selection-control/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';

packages/mdc-form-field/adapter.js renamed to packages/mdc-form-field/adapter.ts

@@ -21,39 +21,27 @@
  * THE SOFTWARE.
  */
 
-/* eslint no-unused-vars: [2, {"args": "none"}] */
-
 /**
  * Adapter for MDC Form Field. Provides an interface for managing
  * - event handlers
  * - ripple activation
  *
- * 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 MDCFormFieldAdapter {
-  /**
-   * @param {string} type
-   * @param {!EventListener} handler
-   */
-  registerInteractionHandler(type, handler) {}
-
-  /**
-   * @param {string} type
-   * @param {!EventListener} handler
-   */
-  deregisterInteractionHandler(type, handler) {}
-
-  activateInputRipple() {}
 
-  deactivateInputRipple() {}
+interface MDCFormFieldAdapter {
+  activateInputRipple(): void;
+  deactivateInputRipple(): void;
+  deregisterInteractionHandler<K extends keyof GlobalEventHandlersEventMap>(
+    type: K, handler: (evt: GlobalEventHandlersEventMap[K],
+  ) => void): void;
+  registerInteractionHandler<K extends keyof GlobalEventHandlersEventMap>(
+    type: K, handler: (evt: GlobalEventHandlersEventMap[K],
+  ) => void): void;
 }
 
-export default MDCFormFieldAdapter;
+export {MDCFormFieldAdapter as default, MDCFormFieldAdapter};

packages/mdc-form-field/constants.js renamed to packages/mdc-form-field/constants.ts

@@ -21,12 +21,10 @@
  * THE SOFTWARE.
  */
 
-/** @enum {string} */
 const cssClasses = {
   ROOT: 'mdc-form-field',
 };
 
-/** @enum {string} */
 const strings = {
   LABEL_SELECTOR: '.mdc-form-field > label',
 };

packages/mdc-form-field/foundation.js renamed to packages/mdc-form-field/foundation.ts

@@ -22,39 +22,34 @@
  */
 
 import MDCFoundation from '@material/base/foundation';
-import MDCFormFieldAdapter from './adapter';
+import {MDCFormFieldAdapter} from './adapter';
 import {cssClasses, strings} from './constants';
 
-/**
- * @extends {MDCFoundation<!MDCFormFieldAdapter>}
- */
-class MDCFormFieldFoundation extends MDCFoundation {
-  /** @return enum {cssClasses} */
+class MDCFormFieldFoundation extends MDCFoundation<MDCFormFieldAdapter> {
   static get cssClasses() {
     return cssClasses;
   }
 
-  /** @return enum {strings} */
   static get strings() {
     return strings;
   }
 
-  /** @return {!MDCFormFieldAdapter} */
-  static get defaultAdapter() {
+  static get defaultAdapter(): MDCFormFieldAdapter {
     return {
-      registerInteractionHandler: (/* type: string, handler: EventListener */) => {},
-      deregisterInteractionHandler: (/* type: string, handler: EventListener */) => {},
-      activateInputRipple: () => {},
-      deactivateInputRipple: () => {},
+      activateInputRipple: () => undefined,
+      deactivateInputRipple: () => undefined,
+      deregisterInteractionHandler: () => undefined,
+      registerInteractionHandler: () => undefined,
     };
   }
 
-  constructor(adapter) {
+  private clickHandler_: () => void;
+
+  constructor(adapter: MDCFormFieldAdapter) {
     super(Object.assign(MDCFormFieldFoundation.defaultAdapter, adapter));
 
     /** @private {!EventListener} */
-    this.clickHandler_ = /** @type {!EventListener} */ (
-      () => this.handleClick_());
+    this.clickHandler_ = () => this.handleClick_();
   }
 
   init() {
@@ -65,11 +60,10 @@ class MDCFormFieldFoundation extends MDCFoundation {
     this.adapter_.deregisterInteractionHandler('click', this.clickHandler_);
   }
 
-  /** @private */
-  handleClick_() {
+  private handleClick_() {
     this.adapter_.activateInputRipple();
     requestAnimationFrame(() => this.adapter_.deactivateInputRipple());
   }
 }
 
-export default MDCFormFieldFoundation;
+export {MDCFormFieldFoundation as default, MDCFormFieldFoundation};

packages/mdc-form-field/index.js renamed to packages/mdc-form-field/index.ts

@@ -22,50 +22,31 @@
  */
 
 import MDCComponent from '@material/base/component';
-import MDCFormFieldFoundation from './foundation';
-/* eslint-disable no-unused-vars */
 import {MDCSelectionControl} from '@material/selection-control/index';
-/* eslint-enable no-unused-vars */
+import {MDCFormFieldFoundation} from './foundation';
 
-/**
- * @extends MDCComponent<!MDCFormFieldFoundation>
- */
-class MDCFormField extends MDCComponent {
-  static attachTo(root) {
+class MDCFormField extends MDCComponent<MDCFormFieldFoundation> {
+  static attachTo(root: HTMLElement) {
     return new MDCFormField(root);
   }
 
-  /** @param {?MDCSelectionControl} input */
-  set input(input) {
+  private input_?: MDCSelectionControl;
+
+  set input(input: MDCSelectionControl | undefined) {
     this.input_ = input;
   }
 
-  /** @return {?MDCSelectionControl} */
-  get input() {
+  get input(): MDCSelectionControl | undefined {
     return this.input_;
   }
 
-  constructor(...args) {
-    super(...args);
-
-    /** @private {?MDCSelectionControl} */
-    this.input_;
-  }
-
-  /**
-   * @return {!Element}
-   * @private
-   */
-  get label_() {
+  private get label_(): Element | null {
     const {LABEL_SELECTOR} = MDCFormFieldFoundation.strings;
-    return /** @type {!Element} */ (this.root_.querySelector(LABEL_SELECTOR));
+    return this.root_.querySelector(LABEL_SELECTOR);
   }
 
-  /** @return {!MDCFormFieldFoundation} */
   getDefaultFoundation() {
     return new MDCFormFieldFoundation({
-      registerInteractionHandler: (type, handler) => this.label_.addEventListener(type, handler),
-      deregisterInteractionHandler: (type, handler) => this.label_.removeEventListener(type, handler),
       activateInputRipple: () => {
         if (this.input_ && this.input_.ripple) {
           this.input_.ripple.activate();
@@ -76,6 +57,8 @@ class MDCFormField extends MDCComponent {
           this.input_.ripple.deactivate();
         }
       },
+      deregisterInteractionHandler: (type, handler) => this.label_ && this.label_.removeEventListener(type, handler),
+      registerInteractionHandler: (type, handler) => this.label_ && this.label_.addEventListener(type, handler),
     });
   }
 }

packages/mdc-selection-control/index.js renamed to packages/mdc-selection-control/index.ts

@@ -21,26 +21,17 @@
  * THE SOFTWARE.
  */
 
-/* eslint-disable no-unused-vars */
 import {MDCRipple} from '@material/ripple/index';
-/* eslint-enable no-unused-vars */
 
-/**
- * @typedef {{
- *   checked: boolean,
- *   indeterminate: boolean,
- *   disabled: boolean,
- *   value: ?string
- * }}
- */
-let MDCSelectionControlState;
+interface MDCSelectionControlState {
+  checked: boolean;
+  indeterminate: boolean;
+  disabled: boolean;
+  value?: string;
+}
 
-/**
- * @record
- */
-class MDCSelectionControl {
-  /** @return {?MDCRipple} */
-  get ripple() {}
+interface MDCSelectionControl {
+  readonly ripple: MDCRipple | undefined;
 }
 
 export {MDCSelectionControlState, MDCSelectionControl};

scripts/webpack/js-bundle-factory.js

@@ -161,7 +161,7 @@ class JsBundleFactory {
         dom: getAbsolutePath('/packages/mdc-dom/index.ts'),
         drawer: getAbsolutePath('/packages/mdc-drawer/index.js'),
         floatingLabel: getAbsolutePath('/packages/mdc-floating-label/index.js'),
-        formField: getAbsolutePath('/packages/mdc-form-field/index.js'),
+        formField: getAbsolutePath('/packages/mdc-form-field/index.ts'),
         gridList: getAbsolutePath('/packages/mdc-grid-list/index.js'),
         iconButton: getAbsolutePath('/packages/mdc-icon-button/index.js'),
         iconToggle: getAbsolutePath('/packages/mdc-icon-toggle/index.js'),
@@ -174,7 +174,7 @@ class JsBundleFactory {
         radio: getAbsolutePath('/packages/mdc-radio/index.js'),
         ripple: getAbsolutePath('/packages/mdc-ripple/index.ts'),
         select: getAbsolutePath('/packages/mdc-select/index.js'),
-        selectionControl: getAbsolutePath('/packages/mdc-selection-control/index.js'),
+        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'),