feat(grid-list): ts conversion

package.json

@@ -12,12 +12,12 @@
     "dist": "npm run build && npm run build:min",
     "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --config=demos/webpack.config.js --progress --inline --hot --host 0.0.0.0",
     "fix:js": "eslint --fix packages test webpack.config.js demos/webpack.config.js karma.conf.js",
-    "fix:ts": "tslint --fix \"packages/**/*.ts\" \"test/**/*.ts\" \"scripts/**/*.ts\"",
+    "fix:ts": "tslint --exclude \"test/**/*.d.ts\" --fix \"packages/**/*.ts\" \"test/**/*.ts\" \"scripts/**/*.ts\"",
     "fix:css": "stylelint --fix \"packages/**/*.scss\"; stylelint --fix --config=test/screenshot/.stylelintrc.yaml \"test/screenshot/**/*.scss\"",
     "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-grid-list/adapter.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2019 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+interface MDCGridListAdapter {
+  deregisterResizeHandler(handler: EventListener): void;
+  getNumberOfTiles(): number;
+  getOffsetWidth(): number;
+  getOffsetWidthForTileAtIndex(index: number): number;
+  registerResizeHandler(handler: EventListener): void;
+  setStyleForTilesElement(
+    property: Exclude<keyof CSSStyleDeclaration, ('length' | 'parentRule')>, value: string | null,
+  ): void;
+}
+
+export {MDCGridListAdapter};

packages/mdc-grid-list/foundation.js → packages/mdc-grid-list/foundation.ts

@@ -22,35 +22,42 @@
  */
 
 import MDCFoundation from '@material/base/foundation';
+import {MDCGridListAdapter} from './adapter';
 import {strings} from './constants';
 
-export default class MDCGridListFoundation extends MDCFoundation {
+class MDCGridListFoundation extends MDCFoundation<MDCGridListAdapter> {
   static get strings() {
     return strings;
   }
 
-  static get defaultAdapter() {
+  static get defaultAdapter(): MDCGridListAdapter {
     return {
-      getOffsetWidth: () => /* number */ 0,
-      getNumberOfTiles: () => /* number */ 0,
-      getOffsetWidthForTileAtIndex: (/* index: number */) => /* number */ 0,
-      setStyleForTilesElement: (/* property: string, value: string */) => {},
-      registerResizeHandler: (/* handler: EventListener */) => {},
-      deregisterResizeHandler: (/* handler: EventListener */) => {},
+      deregisterResizeHandler: () => undefined,
+      getNumberOfTiles: () => 0,
+      getOffsetWidth: () => 0,
+      getOffsetWidthForTileAtIndex: () => 0,
+      registerResizeHandler: () => undefined,
+      setStyleForTilesElement: () => undefined,
     };
   }
-  constructor(adapter) {
+
+  private resizeHandler_: () => void;
+  private resizeFrame_ = 0;
+
+  constructor(adapter: MDCGridListAdapter) {
     super(Object.assign(MDCGridListFoundation.defaultAdapter, adapter));
     this.resizeHandler_ = () => this.alignCenter();
-    this.resizeFrame_ = 0;
   }
+
   init() {
     this.alignCenter();
     this.adapter_.registerResizeHandler(this.resizeHandler_);
   }
+
   destroy() {
     this.adapter_.deregisterResizeHandler(this.resizeHandler_);
   }
+
   alignCenter() {
     if (this.resizeFrame_ !== 0) {
       cancelAnimationFrame(this.resizeFrame_);
@@ -60,8 +67,9 @@ export default class MDCGridListFoundation extends MDCFoundation {
       this.resizeFrame_ = 0;
     });
   }
-  alignCenter_() {
-    if (this.adapter_.getNumberOfTiles() == 0) {
+
+  private alignCenter_() {
+    if (this.adapter_.getNumberOfTiles() === 0) {
       return;
     }
     const gridWidth = this.adapter_.getOffsetWidth();
@@ -70,3 +78,5 @@ export default class MDCGridListFoundation extends MDCFoundation {
     this.adapter_.setStyleForTilesElement('width', `${tilesWidth}px`);
   }
 }
+
+export {MDCGridListFoundation as default, MDCGridListFoundation};

packages/mdc-grid-list/index.js → packages/mdc-grid-list/index.ts

@@ -23,29 +23,31 @@
 
 import MDCComponent from '@material/base/component';
 
-import MDCGridListFoundation from './foundation';
+import {MDCGridListFoundation} from './foundation';
 
-export {MDCGridListFoundation};
-
-export class MDCGridList extends MDCComponent {
-  static attachTo(root) {
+class MDCGridList extends MDCComponent<MDCGridListFoundation> {
+  static attachTo(root: Element) {
     return new MDCGridList(root);
   }
 
   getDefaultFoundation() {
     return new MDCGridListFoundation({
-      getOffsetWidth: () => this.root_.offsetWidth,
+      deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
       getNumberOfTiles: () => {
         return this.root_.querySelectorAll(MDCGridListFoundation.strings.TILE_SELECTOR).length;
       },
+      getOffsetWidth: () => (this.root_ as HTMLElement).offsetWidth,
       getOffsetWidthForTileAtIndex: (index) => {
-        return this.root_.querySelectorAll(MDCGridListFoundation.strings.TILE_SELECTOR)[index].offsetWidth;
+        const tile = this.root_.querySelectorAll(MDCGridListFoundation.strings.TILE_SELECTOR)[index] as HTMLElement;
+        return tile.offsetWidth;
       },
+      registerResizeHandler: (handler) => window.addEventListener('resize', handler),
       setStyleForTilesElement: (property, value) => {
-        this.root_.querySelector(MDCGridListFoundation.strings.TILES_SELECTOR).style[property] = value;
+        const tile = this.root_.querySelector(MDCGridListFoundation.strings.TILES_SELECTOR) as HTMLElement;
+        tile.style[property] = value;
       },
-      registerResizeHandler: (handler) => window.addEventListener('resize', handler),
-      deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
     });
   }
 }
+
+export {MDCGridList, MDCGridListFoundation};

scripts/webpack/js-bundle-factory.js

@@ -162,7 +162,7 @@ class JsBundleFactory {
         drawer: getAbsolutePath('/packages/mdc-drawer/index.js'),
         floatingLabel: getAbsolutePath('/packages/mdc-floating-label/index.js'),
         formField: getAbsolutePath('/packages/mdc-form-field/index.ts'),
-        gridList: getAbsolutePath('/packages/mdc-grid-list/index.js'),
+        gridList: getAbsolutePath('/packages/mdc-grid-list/index.ts'),
         iconButton: getAbsolutePath('/packages/mdc-icon-button/index.js'),
         iconToggle: getAbsolutePath('/packages/mdc-icon-toggle/index.js'),
         list: getAbsolutePath('/packages/mdc-list/index.js'),