16-Dec

Introducing Typescript to your React / Webpack apps

Let’s take a quick look at what it takes to introduce typescript to your react-webpack applications and how you can get started.

2 min read

By Tor Egil Fusdahl

December 16, 2018

If you use create-react-app

If you’re using create react app, Facebook has made it very simple to introduce typescript:

# npm:
$ npm install typescript @types/node @types/react @types/react-dom @types/jest
# yarn:
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

Rename the files you want to be able to use typescript in from src/foo.jsx to src/foo.tsx and restart your development server.

create-react-app will generate a tsconfig.json that you can modify to your liking as you get more experienced with Typescript. Type errors will be displayed in your console once your project has built, and it’s time to get to work!

If you manage your own webpack config

If you’re managing webpack yourself there’s a bit more work to do. First we install the essentials:

npm install —-save-dev typescript awesome-typescript-loader @types/react @types/react-dom.

Now go into your webpack config file and add the following loaders for your .tsx files:

{
  test: /\.tsx?$/,
  use: [‘babel-loader’, ‘awesome-typescript-loader’]
},

Remember to resolve your ts and tsx files:

resolve: {
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
},

It’s time to create a tsconfig.json file to your liking and start converting files again. If you want to convert everything at once your can run the following command from your terminal:

find src -name "_.jsx" -exec bash -c 'git mv "$1" "${1%.jsx}".tsx' - '{}' \;
find src -name "_.js" -exec bash -c 'git mv "$1" "${1%.js}".ts' - '{}' \;

Modifying your tsconfig

Your tsconfig is an essential part of writing typescript as it modifies how strict the Typescript compiler is when compiling your code. To begin with it’s usually pretty sweet to have a tolerant compiler that lets you use the any type and allows you to have implicit values in your code, something like this should do the trick:

{
  "compilerOptions": {
    "allowJs": true,
    "outDir": "tsDist",
    "module": "es6",
    "target": "es6",
    "jsx": "react",
    "alwaysStrict": true,
    "moduleResolution": "node"
  },
  "include": [
    "./src/**/*"
  ]
}

Remember to point the include section on all the entry points to your code.

Once you’re getting comfortable with typescript and have converted a larger part of your code it’s often beneficial to make your tsconfig stricter to ensure new code is written according to the standards you want. Some useful options that lead to strict validation are:

{
  "noImplicitThis": true,
  "noImplicitAny": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
}

A full list of compiler options can be found here: https://www.typescriptlang.org/docs/handbook/compiler-options.html

And there we go! You should now be able to introduce typescript to your js-react application and gradually convert your code and adapt your config to fit your needs.