Start Incrementally Adopting TypeScript Today — Here’s How

Photo by David A. Good (CC BY-NC-ND 2.0)

Getting Started

Depending on your setup, adding TypeScript to your existing project might take as little as a minute or two.

Note: These steps only describe how to get started using TypeScript in your project. This will give you a lot of benefits right away, but you should also explore tools like fork-ts-checker-webpack-plugin to make sure your app won’t even build if there are TypeScript errors. Without this, you will only see IDE warnings and errors (assuming you’re using an editor that support this like VS Code), but those can easily be overlooked or ignored.

Project Uses Create React App

1. Run this yarn add typescript @types/node @types/react @types/react-dom @types/jest
2. Change file extension(s) to .ts or .tsx
3. Start writing Typescript

Read more here: https://facebook.github.io/create-react-app/docs/adding-typescript

Project Uses Parcel Bundler

1. Change file extension(s) to .ts or .tsx
2. Start writing Typescript

Read more here: https://parceljs.org/typeScript.html

Project Uses Babel 7+

1. Run this: yarn add -D typescript @babel/preset-typescript
2. Add the preset to your Babel config: {“presets”: [“@babel/preset-typescript”]}
3. Update your webpack config for these properties: the bundle entrypoint, entry; the file extensions, resolve.extensions; and babel-loader’s test, /\.[j|t]sx?$/ to match files ending in .ts, .js, .tsx, and .jsx. See example config here.
4. Change file extension(s) to .ts or .tsx
5. Start writing Typescript

Read more here: https://babeljs.io/docs/en/babel-preset-typescript

None of the Above Apply

The process of incrementally adopting TypeScript is going to be more involved. Here are some useful resources:

React & Webpack · TypeScript

How to set up Typescript with Babel and Webpack

TypeScript With Babel: A Beautiful Marriage