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’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’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' - '{}' \;
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.