February 13, 2019
  • Tutorials
  • Ionic 4
  • react
  • TypeScript

How to Use TypeScript in React

Ely Lucas

At Ionic, we are big fans of TypeScript and use it in several of our important projects, including Ionic Framework, Stencil, Studio, and AppFlow. We find TypeScript beneficial for a number of reasons, but mostly because it helps us scale our large (and fairly complex) codebases in many areas, including:

  • Catching bugs before build time through static type checking
  • Providing code completion and refactoring support in many of our favorite editors, like VS Code, WebStorm, and even Vim
  • Allowing us to use modern language features of JavaScript before they are available in all browsers

We think TypeScript is great, and we think many of our Ionic Angular developers would agree. We have also found TypeScript to be beneficial outside of Angular as well. In fact, we use it in our own AppFlow dashboard, which is a large React app.

Over the past couple of years, TypeScript has started to gain momentum in the React world and, now, has official support in create-react-app. So, we thought it would be helpful to share a little tutorial on how to kick off a new React project using TypeScript.

Using Create-React-App

Create-react-app is the CLI for React projects. While not as encompassing as the Angular CLI, it still does a great job at creating new apps (hence its name).

Install the latest Create-React-App through npm:

npm install -g create-react-app

Now, start a new project by running create-react-app, specify your project name, and add the TypeScript flag:

create-react-app reacttypescript --typescript
cd reacttypescript

This will scaffold out a new React project using TypeScript as the language.

Next, start up the development server:

npm run start

And, just like that, your React project is running in TypeScript!

Notice that you get a tsconfig.json file for your TypeScript configuration. Feel free to customize the settings in here to fit your needs.

React Components in TypeScript

Next, let’s create a new component in TypeScript and consume it from our App to see some of the benefits we now receive.

Create a new file named SayHello.tsx and paste in the following code:

import React from 'react';

interface SayHelloProps {
  name: string;
  onGetNewName: () => void;
}

interface SayHelloState {
  count: number;
}

export default class SayHello extends React.Component<SayHelloProps,SayHelloState> {
  constructor(props: SayHelloProps) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    const { onGetNewName, name } = this.props;
    const { count } = this.state;
    return (
      <div>
        <p>Hello {name}!</p>{' '}
        <button onClick={() => onGetNewName()}>Enter new name</button>
        <p>You clicked {count} times</p>
        <button onClick={() => this.setState({ count: count + 1 })}>
          Click
        </button>
      </div>
    );
  }
}

While this example is a bit contrived, it does highlight a major benefit of TypeScript, which is statically typing our components by specifying interfaces for the props and state objects. The SayHelloProps and SayHelloState interfaces specify the shape of the props and state objects, which are then passed in as generic arguments to the Component class.

Now that our component is statically typed, it is no longer possible to accidentally mistype a name of one of our props or state members, nor can you try to assign it a value that does not match the member’s type.

What’s great about Typescript is that you can catch these errors right in your code editor and also during build time, as seen below.

Wrapping Up

TypeScript helps teams scale their JavaScript projects by providing modern language features, static type checking, and tooling. With the official support of TypeScript in create-react-app, I expect more React users will discover how great this language is and how it can help them with their development.

You might be wondering why a post about React on the Ionic blog? Well, in case you haven’t heard, Ionic 4.0 was built from the ground up to work with any framework, and we have some exciting updates about official support for React coming very soon.

Expect to see more React content coming from us in the future. In the meantime, check out a sample Ionic React app to see the alpha in action.

Want to see more of the benefits of using TypeScript in React? Hit us up in the comments section below or on Twitter with your questions and feedback.


Ely Lucas