Convert packages to TypeScript

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

Additional tasks

• Replace Object.assign with spread where possible (@acdvorak, #4389)
• Create factory type definitions for components that need them (e.g., MDCRippleFactory) (@acdvorak, #4407)
• Move component definitions from index.ts to component.ts (@acdvorak, #4407)
• Standardize interface and type names (e.g., ~Point, MenuPoint, or~ MDCMenuPoint) (@acdvorak, #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, #4407)
• Fix internal linter errors (@acdvorak, #4440)
• Clean up mentions of JS from scripts / configs after everything in packages is TS (@moog16, #4435)
• Update docs (readme, getting-started, importing-js, best practices, etc.) (@moog16, #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, #4415)
• selection-control (not used anywhere)(@kfranqueiro, #4442)

[acdvorak]

Pre-release version 1.0.0-0 has been published on npm 🎉

[moog16]

@gugu - did you see changes outlined in #4409? We’re also using tsc to achieve smaller file sizes, and allow for tree-shaking. I haven’t measured the file sizes, but I’m sure it is smaller than the UMD bundles.

Yes we are not removing webpack from our build.