Start Incrementally Adopting TypeScript Today — Here’s How
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
- Run this
yarn add typescript @types/node @types/react @types/react-dom @types/jest
- Change file extension(s) to
.ts
or.tsx
- Start writing Typescript
Read more here: https://facebook.github.io/create-react-app/docs/adding-typescript
Project Uses Parcel Bundler
- Change file extension(s) to
.ts
or.tsx
- Start writing Typescript
Read more here: https://parceljs.org/typeScript.html
Project Uses Babel 7+
- Run this:
yarn add -D typescript @babel/preset-typescript
- Add the preset to your Babel config:
{“presets”: [“@babel/preset-typescript”]}
- 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. - Change file extension(s) to
.ts
or.tsx
- 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: