How to use React with TypeScript ?

TypeScript is a JavaScript variant with strongly bounded variable types. You need to tell the type of the created variable to the compiler before executing the code. ReactJS is a JavaScript library that is used to develop the User Interface of a website. You can use both of them together to combine their features and write clean and more efficient code.

Steps to setup the Project Environment

Step 1: Create a React app

You have to create a React app before start using TypeScript with React. Use the below command to create and move into your React project directory.

npx create-react-app project_name
cd project_name

Step 2: Install TypeScript

Now, you have to install TypeScript into your current project directory to use it with React using the below npm command.

npm install --save typescript

Step 3: Install React types definition

Install the latest type definition for the react and react-dom using the below command.

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

Step 4: Install React dependencies

Now, install the React dependencies by running the below command into the 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 the application on the web browser to see the output of the written code using the below command.

npm run

Project Structure:

Example 1: The below code is a basic implementation of TypeScript with react to show some text on output screen.

Javascript

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

Javascript

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

Javascript

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

Javascript

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