Introduction

Create React App v2 introduced official TypeScript support, allowing JavaScript users to use TypeScript with the React front-end framework. TypeScript is a powerful tool that helps write safer, self-documenting code, allowing developers to catch bugs faster.

For this article, you will go through the steps of creating a React app with TypeScript using Create React App.

Starting a TypeScript Create React App

First, let’s use create-react-app with the --typescript flag.

npx create-react-app my-typescript-app --typescript

Let’s look at what packages the --typescript flag get us and what changes it makes.

The TypeScript Additions

The --typescript flag will add the main TypeScript package.

We also get this notice: We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

The tsconfig.json file is how we configure TypeScript projects, similar to how package.json is for JS projects.

The default tsconfig.json will look something like the following:

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

Examining the App.tsx File

Let’s jump into the main App file that usually is our main React component:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

As you will notice, this is actually the same as the JavaScript App.js. We get the same base as our JavaScript projects, but we can sprinkle TypeScript on top.

Next, let’s create a TypeScript component and see what benefits we can gain.

Creating a TypeScript Component

We’ll start by creating a normal functional component in this same App.tsx file:

function MyMessage({ message }) {
  return <div>i shall speak! my message is: {message}</div>;
}

This is a simple component where we pull message out of props. Now let’s add some TypeScript to tell this function that its message parameter should be a string.

If you’re familiar with TypeScript, you may think you want to add the following to message: message: string. What we have to do in this situation is define the types for all props as an object. There’s a few ways we can do this:

Types inline:

function MyMessage({ message }: { message: string }) {
  return <div>i shall speak! my message is: {message}</div>;
}

Props object:

function MyMessage(props: { message: string }) {
  return <div>i shall speak! my message is: {props.message}</div>;
}

Separate types object:

interface MyMessageProps {
  message: string;
}

function MyMessage({ message }: MyMessageProps) {
  return <div>i shall speak! my message is: {props.message}</div>;
}

There are many ways to use TypeScript in our projects. You can create an interface and move that into a separate file so your types can live elsewhere. This may seem like a lot of writing, so let’s see what we gain from writing a bit more.

We’ve told this component that it only accepts a string as the message parameter. Now let’s try using this inside our App component.

Using TypeScript Components

Let’s use this MyMessage component.

When we go to use this component, we can see VS Code bring up the component’s signature right as we type. We don’t have to jump back to the component (especially if it’s in another file) to see what its inputs should be.

That isn’t the most readable, so let’s jump into using each prop individually.

Seeing Prop Types

As soon as we start typing message, we can see what that prop should be:

Seeing Type Errors

If we add a number as a message, TypeScript will throw an error and help us catch these typing bugs.

React won’t even compile if there are type errors like this:

Conclusion

This only scratches the surface of what TypeScript provides us. You can create types for all your components and props, and with VS Code you’ll be able to read them. You’ll also catch errors faster since TypeScript won’t even let the project compile with type errors.