How to use TypeScript with React?
Last Updated :
05 Apr, 2025
TypeScript enhances JavaScript by adding strict type definitions, making your code more robust and maintainable. ReactJS, a popular library for building user interfaces, pairs excellently with TypeScript to create clean, efficient, and scalable codebases. Combining TypeScript with React offers a powerful approach to building robust and scalable web applications. In this guide, we will walk through the steps to set up a TypeScript environment with React and provide examples to help you get started.
Steps to setup the Project Environment
Step 1: Create a React app
First, you need to set up a new React project. Use the following command to create a React app and navigate into the project directory.
npx create-react-app project_name
cd project_name
Step 2: Install TypeScript
Next, install TypeScript in your project. This allows you to use TypeScript’s features in your React application.
npm install --save typescript
Step 3: Install React types definition
Install the latest type definitions for React and ReactDOM. These definitions allow TypeScript to understand the types used in React.
npm install @types/react @types/react-dom
Step 4: Install React dependencies
Once the TypeScript and type definitions are installed, install the rest of the React dependencies by running the following command.
Terminal of your IDE.
npm install
Step 5: Create files and Write code
Create different files with .tsx extension in your project directory and write the code using TypeScript and React.
Step 6: Run Project
Now, it’s time to run your project and see the output in your web browser. Use the following command to start the development server:
npm run
Project Structure:

Example 1: The below code is a basic implementation of TypeScript with react to show some text on output screen.
TypeScript
// index.tsx file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<React.StrictMode>
<App prop="Geek" />
</React.StrictMode>,
document.getElementById('root')
);
TypeScript
// App.tsx file
import React from 'react';
interface AppProps {
prop: string;
};
// React Functional component using TypeScript
const App: React.FC<AppProps> = ({ prop }) => {
return (
<div style={{textAlign: 'center'}}>
<h1 style={{color: 'green'}}>GeeksforGeeks</h1>
<h1>Hey {prop}!</h1>
<h2>Welcome to GeeksforGeeks</h2>
<h3>A Computer Science Portal.</h3>
</div>
);
};
export default App;
Output:

Example 2: The below code will show some advanced usage of the TypeScript with React.
TypeScript
// index.tsx file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<React.StrictMode>
<App prop="Geek" />
</React.StrictMode>,
document.getElementById('root')
);
TypeScript
// App.tsx file
import React, { useState } from 'react';
interface AppProps {
prop: string;
};
// React Functional component using TypeScript
const App: React.FC<AppProps> = ({ prop }) => {
const [isHidden, setIsHidden] = useState(false)
function btnClickHandler() {
setIsHidden((prev) => !prev);
}
return (
<div style={{ textAlign: 'center' }}>
<h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
<h1>Hey {prop}!</h1>
<h2>Welcome to GeeksforGeeks</h2>
<h3>A Computer Science Portal.</h3>
<button onClick={btnClickHandler}
style={
{
backgroundColor: "green",
color: '#fff',
padding: '15px',
cursor: 'pointer',
border: 'none',
borderRadius: '10px'
}}>
Click to toggle more page content
</button>
{
isHidden &&
<p>
This content is toggled dynamically using
click event with button.
</p>
}
</div>
);
};
export default App;
Output:
Similar Reads
How to Use MathJS with TypeScript? Math.js library can be use with TypeScript to handle various mathematical tasks while getting the benefits of TypeScriptâs type safety and autocompletion. Integrating Math.js into your TypeScript project allows you to perform arithmetic, algebra, statistics, and more, with the added advantage of Typ
3 min read
How To Use refs in React With TypeScript? To use refs in React with TypeScript, you can take advantage of the ref attribute to directly interact with DOM elements or child components. Refs provide a way to access the underlying DOM node or React component instance and can be especially useful when you need to manage focus, control animation
4 min read
How to use jQuery with TypeScript ? In this article, we will learn how we can use jQuery with TypeScript and implement the features of both languages. The below approach can be used to implement jQuery in TypeScript. By installing jQuery using the npm commandThe jQuery can be installed in your current TypeScript project folder using t
2 min read
How to Use TypeScript with Vite? Vite is a modern build tool known for its speed and efficiency. Using TypeScript with Vite combines Vite's fast development experience with TypeScript's strong static typing, enabling early error detection and more maintainable code. This integration enhances productivity and code quality in modern
3 min read
How to redirect in React with Typescript ? Navigating users seamlessly through a React application is a fundamental aspect of creating a smooth and intuitive user experience. In this article, we delve into the world of redirects in React, specifically addressing the use of TypeScript for enhanced type safety and developer productivity.Prereq
2 min read
Should we use TypeScript with React Native ? React Native is used to creating apps for Both Android and iOS platforms. It allows you to use a single codebase for both platforms. One of the biggest advantages React Native provides is that it's easy to learn because you don't need to learn a whole new programming language for it. Because it uses
8 min read
How to Use NextJS in Typescript? TypeScript enhances Next.js applications by adding static type checking and improves developer experience through type safety. Integrating TypeScript into your Next.js project helps catch errors early and improves code maintainability. It offers even greater productivity and robustness to your web d
5 min read
How to use Typescript with native ES6 Promises ? What is TypeScript? TypeScript is a free as well as an open-source programming language which was developed and is maintained by Microsoft. It actually provides highly productive development tools for JavaScript IDEs and also for practices like static checking. It even makes code easier to read and
3 min read
How to use express in typescript ? In this article, we will see how to use Express in TypeScript. The TypeScript is a superset of JavaScript that provides type notation with the JavaScript, so we can handle our server, and very scalable for the future. Express is web framework helps to create server-side handling with the help of Nod
2 min read
How to use TypeScript on backend ? TypeScript, developed by Microsoft, enhances JavaScript by adding type safety, which significantly simplifies debugging and development. This guide will walk you through setting up a TypeScript backend with Node.js and Express, showing you how to leverage TypeScriptâs robust features to prevent comm
2 min read