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:

--

--

--

Software engineer crafting full-stack, cloud-native solutions for enterprise

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David Good

David Good

Software engineer crafting full-stack, cloud-native solutions for enterprise

More from Medium

I am going to learn Typescript

Setting up a project for Unit Tests

Abstractions in Action: ORM’s and Javascript

`--skipLibCheck` is a dirty, dirty lie