feat(notched-outline): Convert JS to TypeScript (#4375)

Refs #4225

packages/mdc-notched-outline/adapter.js → packages/mdc-notched-outline/adapter.ts

@@ -21,41 +21,33 @@
  * THE SOFTWARE.
  */
 
-/* eslint no-unused-vars: [2, {"args": "none"}] */
-
 /**
- * Adapter for MDC Notched Outline.
- *
- * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the Notched Outline into your framework. See
- * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
- * for more information.
- *
- * @record
+ * Defines the shape of the adapter expected by the foundation.
+ * 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
  */
-class MDCNotchedOutlineAdapter {
+interface MDCNotchedOutlineAdapter {
   /**
    * Adds a class to the root element.
-   * @param {string} className
    */
-  addClass(className) {}
+  addClass(className: string): void;
 
   /**
    * Removes a class from the root element.
-   * @param {string} className
    */
-  removeClass(className) {}
+  removeClass(className: string): void;
 
   /**
    * Sets the width style property of the notch element.
-   * @param {number} width
    */
-  setNotchWidthProperty(width) {}
+  setNotchWidthProperty(width: number): void;
 
   /**
    * Removes the width style property from the notch element.
    */
-  removeNotchWidthProperty() {}
+  removeNotchWidthProperty(): void;
 }
 
-export default MDCNotchedOutlineAdapter;
+export {MDCNotchedOutlineAdapter as default, MDCNotchedOutlineAdapter};

packages/mdc-notched-outline/constants.js → packages/mdc-notched-outline/constants.ts

@@ -21,22 +21,19 @@
  * THE SOFTWARE.
  */
 
-/** @enum {string} */
 const strings = {
   NOTCH_ELEMENT_SELECTOR: '.mdc-notched-outline__notch',
 };
 
-/** @enum {number} */
 const numbers = {
   // This should stay in sync with $mdc-notched-outline-padding * 2.
   NOTCH_ELEMENT_PADDING: 8,
 };
 
-/** @enum {string} */
 const cssClasses = {
+  NO_LABEL: 'mdc-notched-outline--no-label',
   OUTLINE_NOTCHED: 'mdc-notched-outline--notched',
   OUTLINE_UPGRADED: 'mdc-notched-outline--upgraded',
-  NO_LABEL: 'mdc-notched-outline--no-label',
 };
 
 export {cssClasses, numbers, strings};

packages/mdc-notched-outline/foundation.js → packages/mdc-notched-outline/foundation.ts

@@ -22,56 +22,44 @@
  */
 
 import {MDCFoundation} from '@material/base/foundation';
-import MDCNotchedOutlineAdapter from './adapter';
-import {cssClasses, strings, numbers} from './constants';
+import {MDCNotchedOutlineAdapter} from './adapter';
+import {cssClasses, numbers, strings} from './constants';
 
-/**
- * @extends {MDCFoundation<!MDCNotchedOutlineAdapter>}
- * @final
- */
-class MDCNotchedOutlineFoundation extends MDCFoundation {
-  /** @return enum {string} */
+class MDCNotchedOutlineFoundation extends MDCFoundation<MDCNotchedOutlineAdapter> {
   static get strings() {
     return strings;
   }
 
-  /** @return enum {string} */
   static get cssClasses() {
     return cssClasses;
   }
 
-  /** @return enum {number} */
   static get numbers() {
     return numbers;
   }
 
   /**
-   * {@see MDCNotchedOutlineAdapter} for typing information on parameters and return
-   * types.
-   * @return {!MDCNotchedOutlineAdapter}
+   * See {@link MDCNotchedOutlineAdapter} for typing information on parameters and return types.
    */
-  static get defaultAdapter() {
-    return /** @type {!MDCNotchedOutlineAdapter} */ ({
-      addClass: () => {},
-      removeClass: () => {},
-      setNotchWidthProperty: () => {},
-      removeNotchWidthProperty: () => {},
-    });
+  static get defaultAdapter(): MDCNotchedOutlineAdapter {
+    // tslint:disable:object-literal-sort-keys
+    return {
+      addClass: () => undefined,
+      removeClass: () => undefined,
+      setNotchWidthProperty: () => undefined,
+      removeNotchWidthProperty: () => undefined,
+    };
+    // tslint:enable:object-literal-sort-keys
   }
 
-  /**
-   * @param {!MDCNotchedOutlineAdapter} adapter
-   */
-  constructor(adapter) {
-    super(Object.assign(MDCNotchedOutlineFoundation.defaultAdapter, adapter));
+  constructor(adapter: Partial<MDCNotchedOutlineAdapter> = {}) {
+    super({...MDCNotchedOutlineFoundation.defaultAdapter, ...adapter});
   }
 
   /**
-   * Adds the outline notched selector and updates the notch width
-   * calculated based off of notchWidth.
-   * @param {number} notchWidth
+   * Adds the outline notched selector and updates the notch width calculated based off of notchWidth.
    */
-  notch(notchWidth) {
+  notch(notchWidth: number) {
     const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;
 
     if (notchWidth > 0) {
@@ -92,4 +80,4 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
   }
 }
 
-export default MDCNotchedOutlineFoundation;
+export {MDCNotchedOutlineFoundation as default, MDCNotchedOutlineFoundation};

packages/mdc-notched-outline/index.js → packages/mdc-notched-outline/index.ts

@@ -22,35 +22,21 @@
  */
 
 import {MDCComponent} from '@material/base/component';
-
-import MDCNotchedOutlineAdapter from './adapter';
-import MDCNotchedOutlineFoundation from './foundation';
 import {MDCFloatingLabelFoundation} from '@material/floating-label/index';
 import {cssClasses, strings} from './constants';
+import {MDCNotchedOutlineFoundation} from './foundation';
 
-/**
- * @extends {MDCComponent<!MDCNotchedOutlineFoundation>}
- * @final
- */
-class MDCNotchedOutline extends MDCComponent {
-  /**
-   * @param {!Element} root
-   * @return {!MDCNotchedOutline}
-   */
-  static attachTo(root) {
+class MDCNotchedOutline extends MDCComponent<MDCNotchedOutlineFoundation> {
+  static attachTo(root: Element): MDCNotchedOutline {
     return new MDCNotchedOutline(root);
   }
-  /** @param {...?} args */
-  constructor(...args) {
-    super(...args);
-    /** @private {Element} */
-    this.notchElement_;
-  }
+
+  private notchElement_!: HTMLElement; // assigned in initialSyncWithDOM()
 
   initialSyncWithDOM() {
-    const label = this.root_.querySelector('.' + MDCFloatingLabelFoundation.cssClasses.ROOT);
-    this.notchElement_ = this.root_.querySelector(strings.NOTCH_ELEMENT_SELECTOR);
+    this.notchElement_ = this.root_.querySelector<HTMLElement>(strings.NOTCH_ELEMENT_SELECTOR)!;
 
+    const label = this.root_.querySelector<HTMLElement>('.' + MDCFloatingLabelFoundation.cssClasses.ROOT);
     if (label) {
       label.style.transitionDuration = '0s';
       this.root_.classList.add(cssClasses.OUTLINE_UPGRADED);
@@ -63,10 +49,10 @@ class MDCNotchedOutline extends MDCComponent {
   }
 
   /**
-    * Updates classes and styles to open the notch to the specified width.
-    * @param {number} notchWidth The notch width in the outline.
-    */
-  notch(notchWidth) {
+   * Updates classes and styles to open the notch to the specified width.
+   * @param notchWidth The notch width in the outline.
+   */
+  notch(notchWidth: number) {
     this.foundation_.notch(notchWidth);
   }
 
@@ -77,18 +63,18 @@ class MDCNotchedOutline extends MDCComponent {
     this.foundation_.closeNotch();
   }
 
-  /**
-   * @return {!MDCNotchedOutlineFoundation}
-   */
-  getDefaultFoundation() {
-    return new MDCNotchedOutlineFoundation(
-      /** @type {!MDCNotchedOutlineAdapter} */ (Object.assign({
-        addClass: (className) => this.root_.classList.add(className),
-        removeClass: (className) => this.root_.classList.remove(className),
-        setNotchWidthProperty: (width) => this.notchElement_.style.setProperty('width', width + 'px'),
-        removeNotchWidthProperty: () => this.notchElement_.style.removeProperty('width'),
-      })));
+  getDefaultFoundation(): MDCNotchedOutlineFoundation {
+    // tslint:disable:object-literal-sort-keys
+    return new MDCNotchedOutlineFoundation({
+      addClass: (className) => this.root_.classList.add(className),
+      removeClass: (className) => this.root_.classList.remove(className),
+      setNotchWidthProperty: (width) => this.notchElement_.style.setProperty('width', width + 'px'),
+      removeNotchWidthProperty: () => this.notchElement_.style.removeProperty('width'),
+    });
+    // tslint:enable:object-literal-sort-keys
   }
 }
 
-export {MDCNotchedOutline, MDCNotchedOutlineFoundation};
+export {MDCNotchedOutline as default, MDCNotchedOutline};
+export * from './adapter';
+export * from './foundation';

scripts/webpack/js-bundle-factory.js

@@ -170,7 +170,7 @@ class JsBundleFactory {
         linearProgress: getAbsolutePath('/packages/mdc-linear-progress/index.ts'),
         menu: getAbsolutePath('/packages/mdc-menu/index.ts'),
         menuSurface: getAbsolutePath('/packages/mdc-menu-surface/index.ts'),
-        notchedOutline: getAbsolutePath('/packages/mdc-notched-outline/index.js'),
+        notchedOutline: getAbsolutePath('/packages/mdc-notched-outline/index.ts'),
         radio: getAbsolutePath('/packages/mdc-radio/index.ts'),
         ripple: getAbsolutePath('/packages/mdc-ripple/index.ts'),
         select: getAbsolutePath('/packages/mdc-select/index.js'),