To add TypeScript to a project, you'll need to add the
typescript package, configure TypeScript, and use Babel to compile TypeScript files.
Install the typescript package, tslint for linting, and other supporting packages.
See the full list in Mashup Garage's defaults repo.
Create the file
tsconfig.json wherever the top-level
package.json is in your project. For Node.js projects, that'd be the root folder; for Elixir projects, that might be
See our recommend configuration files in Mashup Garage's defaults repo.
Update your Webpack config to allow compilation of
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.
See our recommended Webpack and Babel configs in Mashup Garage's defaults repo.
.jsx files to
.tsx. There are many ways to accomplish this. Here are a few pointers.
Avoid using ts-loader. We strongly recommend using Babel (babel-loader) to compile TypeScript files instead of tsc (ts-loader).
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.