feat(dom): Convert JS to TypeScript (#4269)

Refs #4225

packages/material-components-web/index.js

@@ -26,7 +26,7 @@ import * as base from '@material/base/index.ts';
 import * as checkbox from '@material/checkbox/index';
 import * as chips from '@material/chips/index';
 import * as dialog from '@material/dialog/index';
-import * as dom from '@material/dom/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';

packages/mdc-dom/ponyfill.js → packages/mdc-dom/ponyfill.ts

@@ -26,12 +26,11 @@
  * This makes ponyfills safer than traditional polyfills, especially for libraries like MDC.
  */
 
-/**
- * @param {!Element} element
- * @param {string} selector
- * @return {?Element}
- */
-function closest(element, selector) {
+interface MsElement extends Element {
+  msMatchesSelector(selector: string): boolean;
+}
+
+function closest(element: Element, selector: string): Element | null {
   if (element.closest) {
     return element.closest(selector);
   }
@@ -46,15 +45,10 @@ function closest(element, selector) {
   return null;
 }
 
-/**
- * @param {!Element} element
- * @param {string} selector
- * @return {boolean}
- */
-function matches(element, selector) {
+function matches(element: Element, selector: string): boolean {
   const nativeMatches = element.matches
-    || element.webkitMatchesSelector
-    || element.msMatchesSelector;
+      || element.webkitMatchesSelector
+      || (element as MsElement).msMatchesSelector;
   return nativeMatches.call(element, selector);
 }
 

scripts/webpack/js-bundle-factory.js

@@ -158,7 +158,7 @@ class JsBundleFactory {
         checkbox: getAbsolutePath('/packages/mdc-checkbox/index.js'),
         chips: getAbsolutePath('/packages/mdc-chips/index.js'),
         dialog: getAbsolutePath('/packages/mdc-dialog/index.js'),
-        dom: getAbsolutePath('/packages/mdc-dom/index.js'),
+        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'),

test/unit/mdc-dom/ponyfill.test.js

@@ -25,7 +25,7 @@ import {assert} from 'chai';
 import bel from 'bel';
 import td from 'testdouble';
 
-import {closest, matches} from '../../../packages/mdc-dom/ponyfill';
+import {closest, matches} from '../../../packages/mdc-dom/ponyfill.ts';
 
 suite('MDCDom - ponyfill');