How to start a project with React + TypeScript

#beginners #react #typescript #tutorial

If you're like me, you've been hearing quite a bit about TypeScript. I mean at this point I feel like a see a new article about it every day. I've held off on trying it out for the simple fact that I don't want to add yet another abstraction to my workflow.

Like you, I have a lot of questions I want to be answered before I decide if it's something I will pick up and annoy my team until they're all writing TypeScript too.

What I'm looking to answer in this series

What is Static Typing?
What are the pros/cons of using TypeScript?
How difficult is it to get up and running?
How does TypeScript make me a better programmer?
Does it play nicely with React?
Can I get rid of prop-types?

create-react-app

For new projects

It's easy to start using TypeScript with React projects built with create-react-app. This is the first route I plan on taking in order to get used to working with TypeScript.

All you need to do is run:
npx create-react-app app-name --template typescript
or
yarn create-react-app app-name --template typescript
or
yarn create react-app app-name --template typescript

cd into your project folder and make sure that the following packages have been added as dependencies:

typescript
@types/node
@types/react
@types/react-dom
@types/jest

You will also need to rename any .js files within the src folder to .tsx. This lets your editor know that you will be using TypeScript syntax.

Note: it looks like the latest version of create-react-app sets all of this up for you so you might not have to change anything!

For existing projects

Adding TypeScript to an existing React project is even easier than starting with a new project. Just add the following dependencies to your project:

typescript
@types/node
@types/react
@types/react-dom
@types/jest

Then change any .js and .jsx files within your src folder to .tsx. After these steps, you can run npm start or yarn start and react-scripts will detect that your using TypeScript and create a tsconfig.json file for you.

That's it, you can now use TypeScript with React!

Note: This method only works for react-scripts v2.1.0 and higher. I will not be covering projects not built with create-react-app in this tutorial.

Configuration

If you would like to create your own config for TypeScript you can run tsc --init to generate a tsconfig.json fill that lists all possible configuration options along with comments on what the options do. (It's great!). Otherwise, you can run yarn start/npm start for the first time with the above changes react-scripts will recognize the changes and create a tsconfig.json file in the root directory. Your config should look like this:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

The config is pretty straight forward.
target - is what js version your code will be compiled to.
include - compiles code from the specified files/directories.
allowJs - Allow JavaScript files to be compiled.
jsx - Lets the compiler know that we will be using jsx.

You can check out every setting for the tsconfig.json file here. The default settings are usually enough to work with but feel free to tweak them to your liking. There is also a very convenient playground where you can try out different config settings and see instantly how your code will be compiled.

Start Coding

Now that your project is using TypeScript you can start using it anywhere within your src directory! Your project should be able to run successfully without any TypeScript specific syntax depending on how your config is set up.

Part 2 of this series will discuss the TypeScript syntax and best practices as we build a book of spells.