Convert packages to TypeScript

[kfranqueiro]

Overview

One of our Q1 2019 goals is to convert our packages' JS to TypeScript, as an increasing number of our consumers have TypeScript codebases and would benefit from this change.

The primary goal is to convert the packages themselves - converting the unit tests would be a plus (and would likely help test the conversion) but ideally we should be able to first convert packages one-by-one and continue to test them with the existing JS unit tests to confirm no unintended changes.

The intent of this conversion is ideally to involve no breaking changes, and to continue to provide both the ES6 and ES5 formats that we currently distribute in addition to TS.

This is a master issue for tracking all packages during the conversion, rather than creating 20 separate issues. I'm listing the components with JS below in a rough chronological order of approach (generally prioritizing dependencies ahead of dependents).

Packages to convert

• base (dependency of everything) (@moog16, feat(infrastructure): add tsconfig, tslint, and build setup #4241 along with infrastructure)
• dom (@acdvorak, feat(dom): Convert JS to TypeScript #4269)
• animation (@acdvorak, feat(animation): Convert JS to TypeScript #4271)
• linear-progress (@acdvorak, feat(linear-progress): Convert JS to TypeScript #4272)
• ripple (@moog16, feat(ripple): convert to ts #4300)
• menu-surface (@acdvorak, feat(menu-surface): Convert JS to TypeScript #4273)
• switch (@mmalerba)
• form-field (@moog16, feat(form-field): ts convert #4327)
• selection-control (exists solely for closure annotations; dependency of checkbox/radio) (@moog16, feat(form-field): ts convert #4327)
• checkbox (depends on form-field) (@moog16 and @acdvorak, feat(checkbox): typescript conversion #4319)
• radio (@moog16 and @acdvorak, feat(radio): ts conversion #4329)
• icon-button (@abhiomkar and @acdvorak, feat(icon-button): Convert to TypeScript #4325)
• list (@moog16 and @acdvorak, feat(list): ts conversion #4334)
• menu (depends on menu-surface and list) (@acdvorak, feat(menu): Convert JS to TypeScript #4342)
• dialog (note: focus-trap has its own .d.ts) (@moog16 and @acdvorak, feat(dialog): ts conversion #4333)
• chips (@moog16 and @acdvorak, feat(chips): ts conversion #4332)
• grid-list (@moog16 and @acdvorak, feat(grid-list): ts conversion #4337)
• snackbar (@acdvorak, feat(snackbar): Convert JS to TypeScript #4363)
• slider (@acdvorak, feat(slider): Convert JS to TypeScript #4378)
• line-ripple (@acdvorak, feat(line-ripple): Convert JS to TypeScript #4373)
• floating-label (@acdvorak, feat(floating-label): Convert JS to TypeScript #4374)
• notched-outline (depends on floating-label) (@acdvorak, feat(notched-outline): Convert JS to TypeScript #4375)
• tab-indicator (@acdvorak, feat(tab-indicator): Convert JS to TypeScript #4391)
• tab-scroller (@acdvorak, feat(tab-scroller): Convert JS to TypeScript #4392)
• tab (depends on tab-indicator) (@acdvorak, feat(tab): Convert JS to TypeScript #4393)
• tab-bar (depends on tab and tab-scroller) (@acdvorak, feat(tab-bar): Convert JS to TypeScript #4394)
• textfield (depends on line-ripple, floating-label, and notched-outline) (@acdvorak, feat(text-field): Convert JS to TypeScript #4377)
• select (@acdvorak, feat(select): Convert JS to TypeScript #4386)
• drawer (note: focus-trap has its own .d.ts) (@acdvorak, feat(drawer): Convert JS to TypeScript #4390)
• top-app-bar (@acdvorak, feat(top-app-bar): Convert JS to TypeScript #4397)
• auto-init (@acdvorak, feat(auto-init): Convert JS to TypeScript #4395)
• toolbar (superseded by top-app-bar, but keeping due to unique features) (@acdvorak, feat(toolbar): Convert JS to TypeScript #4410)
• material-components-web (@acdvorak, feat(package): Convert JS to TypeScript #4396)
• tabs (superseded by tab-bar, tab-scroller, tab, and tab-indicator, but keeping due to unique features) (@acdvorak, feat(tabs): Convert JS to TypeScript #4412)

Additional tasks

• Replace Object.assign with spread where possible (@acdvorak, chore: Remove Object.assign from TS files #4389)
• Create factory type definitions for components that need them (e.g., MDCRippleFactory) (@acdvorak, refactor: Make TS easier to wrap #4407)
• Move component definitions from index.ts to component.ts (@acdvorak, refactor: Make TS easier to wrap #4407)
• Standardize interface and type names (e.g., Point, MenuPoint, or MDCMenuPoint) (@acdvorak, refactor: Make TS easier to wrap #4407)
• Create *EventDetail interfaces for all custom events that emit a detail property, and use generic signature of emit<*EventDetail>() to prevent accidental type errors (@acdvorak, refactor: Make TS easier to wrap #4407)
• Fix internal linter errors (@acdvorak, chore: Fix internal tslint errors #4440)
• Clean up mentions of JS from scripts / configs after everything in packages is TS (@moog16, chore: replace JS for TS #4435)
• Update docs (readme, getting-started, importing-js, best practices, etc.) (@moog16, docs: update contribution/getting started guides for TypeScript #4432)
• Review check-imports.js script and ensure it is still working

Packages to remove

We should consider removing the following deprecated packages rather than spending time converting them:

• icon-toggle (superseded by icon-button) (@moog16, chore: remove icon-toggle #4415)
• selection-control (not used anywhere)(@kfranqueiro, chore(package): Remove selection-control #4442)

[nemethmik]

This is great. All JS teams developing any beyond-to-do-list-and-hello-world application should use TypeScript, it's astounding, TypeScript brings JS to the level of feature-rich business application development.