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.

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

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: