How to Use TypeScript with React | Update 2024

58

TypeScript offers strong typing and object-oriented features to JavaScript, making your React applications more predictable and easier to debug. In this guide, we’ll walk through the steps of setting up a React project with TypeScript.

Prerequisites

Before starting, make sure you have the following installed:

• Node.js (Download from nodejs.org)
• npm (Comes with Node.js)

Step-by-Step Guide Using TypeScript with React

Step 1: Create a New React Application

To start, create a new React application using the Create React App (CRA) tool, which supports TypeScript by default. Open your terminal and run:

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

This command creates a new directory called my-app with a TypeScript-ready React project.

Step 2: Understand the Structure

Navigate into your project directory:

cd my-app

Your project folder will contain several TypeScript files (.ts and .tsx extensions). Key files include:

• src/index.tsx — the entry point for your React application.
• src/App.tsx — a basic React component.

Step 3: Explore TypeScript Configuration

The TypeScript configuration file, tsconfig.json, controls how TypeScript works in your project. Common settings include:

• noImplicitAny: When true, prevents variables with ‘any’ types unless explicitly declared.
• strictNullChecks: When true, null and undefined have their own distinct types for better checks.

You don’t need to change this configuration now, but it’s useful to know it exists.

Step 4: Create a TypeScript React Component

Let’s modify the App.tsx file to use TypeScript features. Open src/App.tsx and replace its contents with:

import React from 'react';

interface AppProps {
  title: string;
}

const App: React.FC<AppProps> = ({ title }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>Welcome to your TypeScript React application!</p>
    </div>
  );
};

export default App;

In this code:

• AppProps defines the expected props structure with a title of type string.
• React.FC<AppProps> is a generic type from React, used for functional components with defined props.

Step 5: Use Your Component

Modify src/index.tsx to use the App component with a title prop:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <App title="Hello TypeScript!" />
  </React.StrictMode>,
  document.getElementById('root')
);

Step 6: Run Your Application

Start the development server with:

npm start

Your browser will open to http://localhost:3000/, displaying your React application running with TypeScript.

Conclusion

Congratulations! You’ve just set up a React project using TypeScript. This setup helps you catch errors early during development thanks to TypeScript’s static typing. As you get more comfortable with TypeScript, you can explore more complex types and interfaces to enhance your React applications.

Using TypeScript with React – FAQs