From React to TypeScipt: How to Add TypeScript to your React App

Photo by Moises de Paula on Unsplash

I have experience using TypeScript and React together. I can tell you — using React with TypeScript is not always intuitive. It takes some getting used to and I spent some time figuring out patterns for typing React. React components also introduce more type complexity.

Over time, I have found patterns to make the process easier.

In this article, let’s talk step-by-step through adding TypeScript to your already-created React app. We will go through…

• How to install

• How to change your file names

• How to add TypeScript types to your React props

Step 1: Install TypeScript to Your React App

You can use npm or yarn to install TypeScript to your React app. To install TypeScript, see Installation in the React documentation or the commands below.

• To install TypeScript to your React app with npx, run:npm install --save typescript @types/node @types/react @types/react-dom @types/jest

• To install TypeScript to your React app with yarn, run:
  yarn add typescript @types/node @types/react @types/react-dom @types/jest

Step 2: [Optional] Install Eslint and Prettier

Where possible, you want your style rules to be followed. Installing Eslint and Prettier will allow you to have more control over your codebase and allow for changes to happen automatically.

To install Eslint…

1. To install Eslint, run one of the following commands:

   • npm install eslint --save-dev

   • yarn add eslint --dev

2. To install the Eslint config, run one of the following commands at the project root:

   • npm run eslint --init

   • yarn run eslint --init

3. To install Prettier, run one of the following commands:

   • npm install --save-dev --save-exact prettier

   • yarn add --dev --exact prettier

For further configuration and setup, Sitepoint has an excellent article. See React with TypeScript: Best Practices

Step 3: Change Your File Names from React to TypeScript

After you install TypeScript, you need to update all your component files from .jsx to .tsx. This may be an extensive process to do manually, but you can run a script to change the file names quickly.

To change your filenames quickly, run the following command in your terminal window:

find app/src -name "*.jsx" -exec sh -c 'mv "$0" "${0%.js}.tsx"' {} \;

Step 4: Add Your Config File

To use TypeScript, you need a tsconfig.json file at the root. This file allows you to configure compiler settings.

When you installed TypeScript, with yarn or npx, you got a tsc command tool. You can use this to scaffold your tsconfig.json file.

To create a tsconfig.json file, run one of the following commands in your terminal:

• npm run tsc --init

• yarn run tsc --init

Step 5: Add Types To Your React Props

In this step, go through each of your React components and type all of your React component props. You can use either type or interface. For more information on the difference, see Types vs. interfaces in TypeScript by LogRocket.

See below for an example component:

import { ReactNode, MouseEventHandler } from 'react'

interface ButtonProps {
  children: ReactNode; // Works for both Element and string
  className?: string;
  onClick: MouseEventHandler;
  type: 'button' | 'submit' | 'reset';
}

export default function Button({
  children,
  className = "",
  onClick,
  type,
}: ButtonProps) {
  return (
     <button type={type} className={classname} onClick={onClick}>
       {children}
     </button>
  )
}

The example above demonstrates several different TypeScript types. Two types above are imported from react: ReactNode and MouseEventHandler.

ReactNode is an important type to know. To learn more about ReactNode, see JSX.Element vs ReactElement vs ReactNode from Dev.to.

You can also study React-specific types to become comfortable with your conversion from React to TypeScript. To study, see Typing Component Props from the React TypeScript Cheatsheet documentation.

Step 6: Resolve TypeScript Errors

From here, run your app and address each error as it comes up. If you are new to TypeScript, addressing each error is the best way to get familiar with the tool. For each error, you can Google the error or look it up in the official documentation.

If you get stuck, you can disable the rule with a comment.

To disable a TypeScript error, write the following line directly before the error:

// @ts-ignore

Step 7: Configure Your TypeScript Rules

As you become more comfortable with TypeScript and your preferences, you can configure your TypeScript rules in tsconfig.json. For more information about the file and how to configure it, see What is a tsconfig.json in the TypeScript documentation.

How do you know when to go stricter? There are different philosophies on this. I feel that TypeScript has two core benefits:

• Declaring your intention

• Preventing bugs

If you find that your rules are either so loose that they either cause confusion or they produce unexpected bugs, your rules are too loose. As a preventative measure, you can start with stricter settings and loosen as they become more annoying than helpful.

When typing, aim to be as precise as possible to your intention. For example, in my Button component, I defined a type with ’button’ | ‘submit’ | ‘reset’ instead of simply string. The more strict type will ensure that the component is used as intended.