Install TypeScript

Create TypeScript configuration

Update webpack.config.js

Update your Webpack config to allow compilation of .ts and .tsx files. If your project is already using babel-loader, this configuration may already be there, and you just to update the test value to include TypeScript's extensions. Otherwise, you might need to add the entire module.rules[] section as necessary below.

Rename files

Rename your .js to .ts and .jsx files to .tsx. There are many ways to accomplish this. Here are a few pointers. • Using moreutils's vidir https://relentlesscoding.com/posts/use-vidir-to-quickly-edit-filenames-in-your-editor/ • Using ranger's :flat and :bulkrenamehttps://github.com/ranger/ranger/wiki/Official-user-guide

Additional notes

Avoid using ts-loader Avoid using ts-loader. We strongly recommend using Babel (babel-loader) to compile TypeScript files instead of tsc (ts-loader). • Babel is much faster than tsc. While tsc is a full type-checker and compiler, Babel will not do any type-checking, leading to faster compile times. • Not using tsc means features that rely on emitting are disabled. While this seems like a bad idea, • Most of MG projects already use Babel, so migrating to TypeScript using the same JavaScript compiler is the most practical path to updating to TypeScript. • Install @types and typescript to devDependencies More notes • Add linting and formatting. After setting up TypeScript, add Tslint and Prettier afterwards to improve your coding experience. • Always use strict: true. The configuration outlined above already includes this rule. This disallows implicit any types, which should lessen chances of running into false positives (ie, TypeScript allowing something that will cause runtime type errors). • Avoid using eslint. TypeScript support in eslint is very limited (as of Feb 2019). Tslint provides most of the Eslint rules that matter, while also providing many TypeScript-specific rules.

Further reading

• TypeScript in 5 minutes (typescriptlang.org) — The official quick-start guide from the TypeScript team https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html • [TypeScript playground (typescriptlang.org) — Try TypeScript features on your browser](https://www.typescriptlang.org/play/?#code/PTAEHUFMBsGMHsC2lQBd5oBYoCoE8AHSAZVgCcBLA1UABWgEM8BzM+AVwDsATAGiwoBnUENANQAd0gAjQRVSQAUCEmYKsTKGYUAbpGF4OY0BoadYKdJMoL+gzAzIoz3UNEiPOofEVKVqAHSKymAAmkYI7NCuqGqcANag8ABmIjQUXrFOKBJMggBcISGgoAC0oACCbvCwDKgU8JkY7p7ehCTkVDQS2E6gnPCxGcwmZqDSTgzxxWWVoASMFmgYkAAeRJTInN3ymj4d-jSCeNsMq-wuoPaOltigAKoASgAywhK7SbGQZIIz5VWCFzSeCrZagNYbChbHaxUDcCjJZLfSDbExIAgUdxkUBIursJzCFJtXydajBBCcQQ0MwAUVWDEQC0gADVHBQGNJ3KAALygABEAAkYNAMOB4GRonzFBTBPB3AERcwABS0+mM9ysygc9wASmCKhwzQ8ZC8iHFzmB7BoXzcZmY7AYzEg-Fg0HUiQ58D0Ii8fLpDKZgj5SWxfPADlQAHJhAA5SASPlBFQAeS+ZHegmdWkgR1QjgUrmkeFATjNOmGWH0KAQiGhwkuNok4uiIgMHGxCyYrA4PCCJSAA) • TypeScript deep dive (basarat.gitbook.io) — A free e-book on TypeScript https://basarat.gitbook.io/typescript