feat(chips): ts conversion (#4332)

related #4225

Author: Matt Goo

packages/mdc-chips/README.md

@@ -279,12 +279,12 @@ Method Signature | Description
 
 Property | Value Type | Description
 --- | --- | ---
-`id` | string | Unique identifier on the chip\*
-`selected` | Boolean | Proxies to the foundation's `isSelected`/`setSelected` methods
-`shouldRemoveOnTrailingIconClick` | Boolean | Proxies to the foundation's `getShouldRemoveOnTrailingIconClick`/`setShouldRemoveOnTrailingIconClick` methods\*\*
-`ripple` | `MDCRipple` | The `MDCRipple` instance for the root element that `MDCChip` initializes
+`id` | `string` (read-only) | Unique identifier on the chip\*
+`selected` | `boolean` | Proxies to the foundation's `isSelected`/`setSelected` methods
+`shouldRemoveOnTrailingIconClick` | `boolean` | Proxies to the foundation's `getShouldRemoveOnTrailingIconClick`/`setShouldRemoveOnTrailingIconClick` methods\*\*
+`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCChip` initializes
 
-> \*_NOTE_: This will be the same as the `id` attribute on the root element. If an `id` is not provided, a unique one will be generated.
+> \*_NOTE_: This will be the same as the `id` attribute on the root element. If an `id` is not provided, a unique one will be generated by `MDCChipSet.addChip()`.
 
 > \*\*_NOTE_: If `shouldRemoveOnTrailingIconClick` is set to false, you must manually call `beginExit()` on the chip to remove it.
 
@@ -307,16 +307,16 @@ Method Signature | Description
 
 Property | Value Type | Description
 --- | --- | ---
-`chips` | Array<`MDCChip`> | An array of the `MDCChip` objects that represent chips in the set
-`selectedChipIds` | `!Array<string>` (read-only) | An array of the IDs of all selected chips
+`chips` | `ReadonlyArray<MDCChip>` | An array of the `MDCChip` objects that represent chips in the set
+`selectedChipIds` | `ReadonlyArray<string>` | An array of the IDs of all selected chips
 
 ## Usage within Web Frameworks
 
 If you are using a JavaScript framework, such as React or Angular, you can create Chips for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).
 
 ### Adapters: `MDCChipAdapter` and `MDCChipSetAdapter`
 
-See [`chip/index.js`](chip/index.js) and [`chip-set/index.js`](chip-set/index.js) for vanilla DOM implementations of these adapter APIs for reference.
+See [`chip/index.ts`](chip/index.ts) and [`chip-set/index.ts`](chip-set/index.ts) for vanilla DOM implementations of these adapter APIs for reference.
 
 #### `MDCChipAdapter`
 
@@ -336,7 +336,7 @@ Method Signature | Description
 `setStyleProperty(propertyName: string, value: string) => void` | Sets the property value of the given style property on the root element
 `hasLeadingIcon() => boolean` | Returns whether the chip has a leading icon
 `getRootBoundingClientRect() => ClientRect` | Returns the bounding client rect of the root element
-`getCheckmarkBoundingClientRect() => ?ClientRect` | Returns the bounding client rect of the checkmark element or null if it doesn't exist
+`getCheckmarkBoundingClientRect() => ClientRect \| null` | Returns the bounding client rect of the checkmark element or null if it doesn't exist
 
 > \*_NOTE_: `notifyInteraction` and `notifyTrailingIconInteraction` must pass along the target chip's ID, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling).
 
@@ -382,7 +382,7 @@ Events | Element Selector | Foundation Handler
 
 Method Signature | Description
 --- | ---
-`getSelectedChipIds() => !Array<string>` | Returns an array of the IDs of all selected chips
+`getSelectedChipIds() => ReadonlyArray<string>` | Returns an array of the IDs of all selected chips
 `select(chipId: string) => void` | Selects the chip with the given id
 `handleChipInteraction(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element
 `handleChipSelection(chipId: string, selected: boolean) => void` | Handles a custom `MDCChip:selection` event on the root element

packages/mdc-chips/chip-set/adapter.js renamed to packages/mdc-chips/chip-set/adapter.ts

@@ -21,38 +21,28 @@
  * THE SOFTWARE.
  */
 
-/* eslint no-unused-vars: [2, {"args": "none"}] */
-
 /**
- * Adapter for MDC Chip Set.
- *
- * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the Chip Set 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 MDCChipSetAdapter {
+interface MDCChipSetAdapter {
   /**
-   * Returns true if the root element contains the given class name.
-   * @param {string} className
-   * @return {boolean}
+   * @return true if the root element contains the given class name.
    */
-  hasClass(className) {}
+  hasClass(className: string): boolean;
 
   /**
    * Removes the chip with the given id from the chip set.
-   * @param {string} chipId
    */
-  removeChip(chipId) {}
+  removeChip(chipId: string): void;
 
   /**
    * Sets the selected state of the chip with the given id.
-   * @param {string} chipId
-   * @param {boolean} selected
    */
-  setSelected(chipId, selected) {}
+  setSelected(chipId: string, selected: boolean): void;
 }
 
-export default MDCChipSetAdapter;
+export {MDCChipSetAdapter as default, MDCChipSetAdapter};

packages/mdc-chips/chip-set/constants.js renamed to packages/mdc-chips/chip-set/constants.ts

@@ -21,12 +21,10 @@
  * THE SOFTWARE.
  */
 
-/** @enum {string} */
 const strings = {
   CHIP_SELECTOR: '.mdc-chip',
 };
 
-/** @enum {string} */
 const cssClasses = {
   CHOICE: 'mdc-chip-set--choice',
   FILTER: 'mdc-chip-set--filter',

packages/mdc-chips/chip-set/foundation.js renamed to packages/mdc-chips/chip-set/foundation.ts

@@ -22,78 +22,46 @@
  */
 
 import {MDCFoundation} from '@material/base/foundation';
-import MDCChipSetAdapter from './adapter';
-// eslint-disable-next-line no-unused-vars
-import {MDCChipInteractionEventType, MDCChipSelectionEventType, MDCChipRemovalEventType} from '../chip/foundation';
-import {strings, cssClasses} from './constants';
+import {MDCChipSetAdapter} from './adapter';
+import {cssClasses, strings} from './constants';
 
-/**
- * @extends {MDCFoundation<!MDCChipSetAdapter>}
- * @final
- */
-class MDCChipSetFoundation extends MDCFoundation {
-  /** @return enum {string} */
+class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {
   static get strings() {
     return strings;
   }
 
-  /** @return enum {string} */
   static get cssClasses() {
     return cssClasses;
   }
 
-  /**
-   * {@see MDCChipSetAdapter} for typing information on parameters and return
-   * types.
-   * @return {!MDCChipSetAdapter}
-   */
-  static get defaultAdapter() {
-    return /** @type {!MDCChipSetAdapter} */ ({
-      hasClass: () => {},
-      removeChip: () => {},
-      setSelected: () => {},
-    });
+  static get defaultAdapter(): MDCChipSetAdapter {
+    return {
+      hasClass: () => false,
+      removeChip: () => undefined,
+      setSelected: () => undefined,
+    };
   }
 
   /**
-   * @param {!MDCChipSetAdapter} adapter
+   * The ids of the selected chips in the set. Only used for choice chip set or filter chip set.
    */
-  constructor(adapter) {
-    super(Object.assign(MDCChipSetFoundation.defaultAdapter, adapter));
+  private selectedChipIds_: string[] = [];
 
-    /**
-     * The ids of the selected chips in the set. Only used for choice chip set or filter chip set.
-     * @private {!Array<string>}
-     */
-    this.selectedChipIds_ = [];
+  constructor(adapter: MDCChipSetAdapter) {
+    super(Object.assign(MDCChipSetFoundation.defaultAdapter, adapter));
   }
 
   /**
    * Returns an array of the IDs of all selected chips.
-   * @return {!Array<string>}
    */
-  getSelectedChipIds() {
-    return this.selectedChipIds_;
-  }
-
-  /**
-   * Toggles selection of the chip with the given id.
-   * @private
-   * @param {string} chipId
-   */
-  toggleSelect_(chipId) {
-    if (this.selectedChipIds_.indexOf(chipId) >= 0) {
-      this.deselect_(chipId);
-    } else {
-      this.select(chipId);
-    }
+  getSelectedChipIds(): ReadonlyArray<string> {
+    return this.selectedChipIds_.slice();
   }
 
   /**
    * Selects the chip with the given id. Deselects all other chips if the chip set is of the choice variant.
-   * @param {string} chipId
    */
-  select(chipId) {
+  select(chipId: string) {
     if (this.selectedChipIds_.indexOf(chipId) >= 0) {
       return;
     }
@@ -107,35 +75,19 @@ class MDCChipSetFoundation extends MDCFoundation {
     this.adapter_.setSelected(chipId, true);
   }
 
-  /**
-   * Deselects the chip with the given id.
-   * @private
-   * @param {string} chipId
-   */
-  deselect_(chipId) {
-    const index = this.selectedChipIds_.indexOf(chipId);
-    if (index >= 0) {
-      this.selectedChipIds_.splice(index, 1);
-      this.adapter_.setSelected(chipId, false);
-    }
-  }
-
   /**
    * Handles a chip interaction event
-   * @param {string} chipId
    */
-  handleChipInteraction(chipId) {
+  handleChipInteraction(chipId: string) {
     if (this.adapter_.hasClass(cssClasses.CHOICE) || this.adapter_.hasClass(cssClasses.FILTER)) {
       this.toggleSelect_(chipId);
     }
   }
 
   /**
    * Handles a chip selection event, used to handle discrepancy when selection state is set directly on the Chip.
-   * @param {string} chipId
-   * @param {boolean} selected
    */
-  handleChipSelection(chipId, selected) {
+  handleChipSelection(chipId: string, selected: boolean) {
     const chipIsSelected = this.selectedChipIds_.indexOf(chipId) >= 0;
     if (selected && !chipIsSelected) {
       this.select(chipId);
@@ -146,12 +98,33 @@ class MDCChipSetFoundation extends MDCFoundation {
 
   /**
    * Handles the event when a chip is removed.
-   * @param {string} chipId
    */
-  handleChipRemoval(chipId) {
+  handleChipRemoval(chipId: string) {
     this.deselect_(chipId);
     this.adapter_.removeChip(chipId);
   }
+
+  /**
+   * Deselects the chip with the given id.
+   */
+  private deselect_(chipId: string) {
+    const index = this.selectedChipIds_.indexOf(chipId);
+    if (index >= 0) {
+      this.selectedChipIds_.splice(index, 1);
+      this.adapter_.setSelected(chipId, false);
+    }
+  }
+
+  /**
+   * Toggles selection of the chip with the given id.
+   */
+  private toggleSelect_(chipId: string) {
+    if (this.selectedChipIds_.indexOf(chipId) >= 0) {
+      this.deselect_(chipId);
+    } else {
+      this.select(chipId);
+    }
+  }
 }
 
-export default MDCChipSetFoundation;
+export {MDCChipSetFoundation as default, MDCChipSetFoundation};