How to use TypeScript with React?

Using TypeScript with React improves code quality by adding static typing, which helps catch errors early and provides better tooling support. It enhances maintainability, scalability, and developer productivity in React applications.

Steps To Setup Project Environment

Follow these steps to set up a React project with TypeScript, including installation, configuration, and running the app.

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.

// 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')
);

// 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:

In this example:

• index.tsx: The entry point of the React app, where the App component is rendered into the DOM. It passes a prop "Geek" to the App component.
• App.tsx: Defines the App component with TypeScript. The AppProps interface ensures the prop is a string. The component displays a welcome message using the prop passed from index.tsx.

Example 2: The below code will show some advanced usage of the TypeScript with React.

// 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')
);

// 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:

In this example

• The index.tsx file imports React, ReactDOM, and the App component.
• ReactDOM.render() renders the App component inside the HTML element with id="root".
• The App component receives a prop="Geek".
• React.StrictMode wraps the app to help detect potential issues during development.