TypeScript Configuration for React

In notebook:
FrontEndMasters Intermediate React
Created at:
2019-06-24
Updated:
2019-08-15
Tags:
React libraries JavaScript

https://frontendmasters.com/courses/intermediate-react-v2/typescript-configuration-for-react/

Migrate the project to TypeScript

It's very annoying and very painful but possible.

npm install -D typescript

then run, to initialise the TypeScript project:

npx tsc --init

This creates a tsconfig.json file.

The modifications he adds:

   //    ****        tsconfig.json        ****

 "target": "ES2018",
 ...

 "jsx": "react",
 ...
 // important to have strict mode
 "strict": true

Importance of strict mode

You can start off with strict mode off, it would be easier to start, but you lose many of the benefits.

In the long term, you should always aim for strict mode true, even if you start off with false.

Defintely typed

It's an independent project that creates type definitions for projects that don't have them.

npm install -D @types/react @types/react-dom @types/reach__router

Now, we have the type definitions for React and Reach router.