Using TypeScript with React: A tutorial with examples

Editor’s note: This guide to using TypeScript with React was last updated on 3 August 2021. To keep up to date with the latest developments in the React community, check out “How to use TypeScript with React 18 alpha.”

In this tutorial, you’ll learn everything you need to know about using TypeScript in your React projects. You’ll also learn why you should use TypeScript in React, how to install and configure TypeScript, and how to use TypeScript interfaces with React components.

We’ll cover the following with examples:

• What is React?
• What is TypeScript?
• Is TypeScript good for React?
• Installing and configuring TypeScript
• How does TypeScript compile React code?
• Configuring webpack
• Adding npm scripts
• Creating the index.tsx file
• Creating React components in TypeScript
• Using TypeScript interfaces with React components

What is React?

Created by Facebook and originally open-sourced in 2013, React has become one of the most popular libraries in the frontend world today. React is easily extendable and can include features such as routing and state management patterns with libraries such as Redux. React is minimal in its footprint but can be customized for almost any project.

For more about React at a high level, check out the official React documentation.

What is TypeScript?

TypeScript is a free, open-source programming language developed and maintained by Microsoft. It is a strict superset of JavaScript that adds optional static typing and class-based, object-oriented programming to the language.

Is TypeScript good for React?

TypeScript can be helpful to React developers in many ways. Below are just a few benefits of using TypeScript in React.

Readable, easily understandable code

The key to TypeScript is that it’s a statically typed script. Programming languages can either be statically or dynamically typed; the difference is when type checking occurs. Static languages variables are type-checked.

Interfaces

TypeScript allows you to define complex type definitions in the form of interfaces. This is helpful when you have a complex type that you want to use in your application, such as an object which contains other properties. This results in strict checks, which reduces the number of possible bugs you might have produced without it.

Better support for JSX

JSX stands for JavaScript XM. It allows us to write HTML code directly in our React project. Using TypeScript with React provides better IntelliSense, code completion for JSX.

We made a custom demo for .
No really. Click here to check it out.

Click here to see the full demo with network requests

IDE support

TypeScript is very helpful while using IDEs such as Visual Studio, Visual Studio Code, Atom, Webstorm, Eclipse, and so many more. These provide better autocomplete and snippet generation, which makes development faster.

Support for existing React projects

TypeScript allows you gradually adapt its usage in your existing projects. You can also configure the TypeScript compiler for this use case. Find a list of TypeScript compilers in the official TypeScript documentation.

Community

TypeScript is an open-source language backed by Microsoft. It’s widely loved and used by millions of developers worldwide. This means it’s easy to find support and answers to your questions if you get stuck while learning or using TypeScript.

Installing and configuring TypeScript

There are two ways to install and get started with TypeScript

• Using npm
• Using create-react-app

To install TypeScript using npm, run the following in your terminal:

npm install -g typescript

Because we installed TypeScript globally, we need to link it so that npm knows the location.
To do this, we run:

npm link typescript

Once npm is done, you can verify that TypeScript is installed correctly:

tsc --v // Version 4.3.5

The above will print out the version number of TypeScript installed.

To get started with a project after successful installation, create a folder that will hold the application.

Create a new directory:

mkdir typescript-react-project

Change directory to the new folder:

cd typescript-react-project

Initiate the project:

npm init

To install TypeScript with create-react-app, run the following one-liner in your terminal:

npx create-react-app .

The command above will create a simple folder structure for your application, then install all the necessary modules and get your project up and running for you.

For this tutorial, we’ll use the npm init method.

How does TypeScript compile React code?

TypeScript always checks for a file called tsconfig.json in the project root folder for instructions. When it finds the tsconfig.json file, it loads the settings defined in the file and uses them to build the project.

A TypeScript project is compiled in one of the following ways:

• By invoking tsc with no input files, in which case the compiler searches for the tsconfig.json file starting in the current directory and continuing up the parent directory chain
• By invoking tsc with no input files and a --project (or just -p) command line option that specifies the path of a directory containing a tsconfig.json file, or a path to a valid .json file containing the configurations

When input files are specified on the command line, tsconfig.json files are ignored.
If you do not have the tsconfig.json file in your root folder, go ahead to create it and add the following code:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
  }
}

The JSON configuration above defines two major sections: the compilerOptions and exclude parameters.

In the compiler options, a target of es6 has been set. This means the JavaScript engine target will be set to es6 but will compile down to es5 as the target. Notice that there is also a key called jsx, which is set to react. This tells TypeScript to compile JSX files as React files. This is similar to running tsc  --jsx react. The outDir is the output folder after compilation.

In the exclude block, node_modules is being defined for it. TypeScript will not scan the node_modules folder for any TypeScript file while compiling.

If you’re familiar with TypeScript and its configuration, you might wonder why the include section is missing. This is because we’re going to configure webpack to handle taking in the entry files, passing them to TypeScript for compilation, and returning a bundled JavaScript script for browsers.

You can learn more about other configuration options in the TypeScript docs.

Configuring webpack

webpack is a tool that lets you compile JavaScript modules and is also known as a module bundler.

To get started with webpack in TypeScript, we need to install webpack and a webpack plugin called ts-loader. To do this, run the following command in the terminal:

npm install webpack webpack-cli ts-loader

What is ts-loader? As its name implies, ts-loader is the TypeScript loader for webpack. Put simply, it’s a plugin that helps webpack work well with TypeScript.

Just like TypeScript, webpack also checks for a file called webpack.config.js for configuration.

If it doesn’t already exist, create a new file called webpack.config.js and add the following code:

const path = require('path');
module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

The code above will direct webpack to enter through the ./src/index.ts file, load and compile all the .ts and .tsx files through the ts-loader, and then output a bundle.js file in our dist directory.

Adding npm scripts

After all configured so far, wouldn’t it make sense if you could just run a command like npm run magic anytime you want to create a bundle? Yes, it would. So, open the package.json file in the project root directory and update the scripts section with:

"scripts": {
   "magic": "webpack"
}

Creating the index.tsx file

After all the configurations were done above, it’s time to create the main entry point file of our project, but before we do that, we need to install types definition for libraries installed.

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

Next, create a new folder src and then a file in the src folder called index.tsx in the root and add the following code:

import * as React from "react";
import * as ReactDOM from "react-dom";
ReactDOM.render(
<div>
<h1>Hello, Welcome to React and TypeScript</h1>
</div>,
  document.getElementById("root")
);

Above is a simple React setup, except that it is using TypeScript. To compile the file, run the command below in your terminal:

npm run magic

A build folder with a file named bundle.js has been created.

Does this newly created bundle work as expected? Create a new index.html file that references the new build to find out:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Getting Started with Typescript and ReactJS</title>
  </head>
  <body>
    <!-- this is where react renders into -->
    <div id="root"></div>
    <script src="dist/bundle.js"></script>
  </body>
</html>

If you double-click on the index.html file to open in a browser, you will see:

Creating React components in TypeScript

Now that we’re great with the basics of writing React in TypeScript, let’s dive into how we can create React components as this is an essential part of developing our application.

In the already created src folder, we create a folder called components. This is the folder that will hold any React component we create. In the components folder, go ahead to create a new filed called FirstComponent.tsx and add the following code:

import * as React from "react";
let Logo ="https://logrocket-assets.io/static/home-hero-c97849b227a3d3015730e3371a76a7f0.svg";
export default class FirstComponent extends React.Component <{}> {
  render() {
    return (
      <div>
        <h3>A Simple React Component Example with Typescript</h3>
        <div>
          <img height="250" src={Logo} /> 
        </div>
        <p>This component shows the Logrocket logo.</p>
        <p>For more info on Logrocket, please visit https://logrocket.com </p>
      </div>
    );
  }
}

The above code block is a simple React component that returns a logo and some text.

To make this new component accessible to React, we need to import and use the component in the base index.tsx file. Update the index.tsx file to:

import * as React from "react";
import * as ReactDOM from "react-dom";
import FirstComponent from './components/FirstComponent'
ReactDOM.render(
    <div>
      <h1>Hello, Welcome to React and TypeScript</h1>
      <FirstComponent/>
    </div>,
    document.getElementById("root")
);

Looking at the code block above, you see that the differences are on lines 3 and 7, where you imported the new component and rendered it, respectively.

If you run the npm run magic command and navigate to your browser, you will see:

Using TypeScript interfaces with React components

One of TypeScript’s core principles is that type checking focuses on the shape that values have. This is sometimes called “duck typing” or “structural subtyping.”

In TypeScript, interfaces fill the role of naming these types and are a powerful way of defining contracts within your code and contracts with code outside of your project.

To see how you can use interfaces with your react components, create a file UserInterface.ts in the src folder and add the following code:

export default interface User{
  name: string;
  age: number;
  address: string;
  dob: Date;
}

The code block above defines a simple User interface, which will be passed in as props into a new component. Because this interface is strongly typed, notice you cannot pass an integer for the name key, as the value is a string.

Create a new component in our components folder called UserComponent.tsx and add the following code:

import * as React from "react";
import UserInterface from '../UserInterface'
export default class UserComponent extends React.Component<UserInterface, {}> {
constructor (props: UserInterface){
  super(props);
}
render() {
  return (  
    <div>
      <h1>User Component</h1>
        Hello, <b>{this.props.name}</b>
        <br/>
        You are <b>{this.props.age} years old</b>
        <br/>
        You live at: <b>{this.props.address}</b>
        <br/>
        You were born: <b>{this.props.dob.toDateString()}</b>
    </div>
    );
  }
}

The code block above is very self-explanatory. The UserInterface created earlier on has been imported and passed down as the props of the UserComponent. In the constructor, we checked that the props passed are of the UserInterface type and in the render function, the data will be displayed on our page.

After creating our UserComponent, update the index.tsx file:

import * as React from "react";
import * as ReactDOM from "react-dom";
import FirstComponent from './components/FirstComponent'
import UserComponent from './components/UserComponent'
ReactDOM.render(
    <div>
      <h1>Hello, Welcome to React and TypeScript</h1>
      <FirstComponent/>
      <UserComponent name="John Doe" age={26} address="87 Summer St, Boston, MA 02110" dob={new Date()} />
    </div>,
    document.getElementById("root")
);

Now run npm run magic, navigate to your browser and view the updated changes. You should see:

Conclusion

In this tutorial, we demonstrated how to use TypeScript with React. We also walked through how to configure webpack with ts-loader to compile the TypeScript files and emit a final build.

The codebase for this tutorial is available here for you to play around with on GitHub.

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — start monitoring for free.