Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

Using TypeScript in React Projects

🎯 What Will You Learn in This Guide?​

This guide shows you how to gain the benefits of type safety, intelligent completion (IntelliSense), and error prevention by adding TypeScript to your React projects.
You will set up the project with the Parcel packager, then learn how to define types in both Functional and Class components.

💻 Prerequisites​

Before you start:

  • Node.js and npm must be installed
  • You must have basic knowledge of React
  • You must be able to use terminal commands

1️⃣ Project Setup and React Dependencies​

Create a new project directory and start npm:

mkdir genixnode-react-ts
cd genixnode-react-ts
npm init -y

This creates the package.json file.

Install React libraries:


npm install react react-dom

2️⃣ Preparing HTML and Source Files​

Create the resource folder:


mkdir src
cd src

Create the index.html file:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>React + TypeScript</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div id="main"></div>
  <script type="module" src="./App.tsx"></script>
</body>
</html>

React components are loaded into this main div.

3️⃣ TypeScript and Parcel Installation​

Install Parcel (packer) and TypeScript:


npm install --save-dev parcel typescript

Add React type definitions:


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

Update your package.json file:


"scripts": {
  "dev": "parcel src/index.html"
}

This script starts the development server.

4️⃣ Creating a Counter Component​

Open a new Counter.tsx file:


import * as React from 'react';

// Sınıf tabanlı sayaç bileşeni
export default class Counter extends React.Component {
  state = { count: 0 };

  increment = () => this.setState({ count: this.state.count + 1 });
  decrement = () => this.setState({ count: this.state.count - 1 });

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>Arttır</button>
        <button onClick={this.decrement}>Azalt</button>
      </div>
    );
  }
}

Then create App.tsx:


import * as React from 'react';
import &#123; render &#125; from 'react-dom';
import Counter from './Counter';

// Counter bileşenini DOM'a render eder
render(<Counter />, document.getElementById('main'));

5️⃣ Starting the Server​

Return to the root directory:


cd ..

Run the application:


npm run dev

You can see the result by going to http://localhost:1234 in the browser.

6️⃣ Type Definition with TypeScript​

🧩 Functional Component​

interface Props { baslangicDegeri: number; }

const Sayac: React.FC<Props> = (&#123; baslangicDegeri &#125;) => (
  <h1>&#123;baslangicDegeri&#125;</h1>
);
export default Sayac;

We specify the expected data types with the props interface.

🧱 Class Component​

interface Props {}
interface State { sayi: number; }

class Counter extends React.Component<Props, State> {
  state: State = { sayi: 0 };
}

Both props and state are typed with the React.Component <Props, State> structure.

⚙️ DefaultProps​

interface Props { sayi?: number; }

class Sayac extends React.Component<Props> {
  static defaultProps = { sayi: 10 };
  render() { return <h1>{this.props.sayi}</h1>; }
}

❓ Frequently Asked Questions (FAQ)​

  1. What does TypeScript do in React?

It catches errors during compilation, provides code completion, and provides a safe development environment.

  1. Can I use TypeScript with CRA (Create React App)?

Yes. Just enter this command:


npx create-react-app myapp --template typescript
  1. Why is @types/react necessary?

React is pure JavaScript. These types of packages are needed for TypeScript to understand it.

  1. What is the difference between Interface and type?

Interface is used for class structures, and type is used for compound and special types.

  1. Will the compilation time increase?

Some yes, but that's the price of bug-free and secure code.

🚀 Result​

Now you can write more secure, understandable and scalable codes using TypeScript in React projects. Try your own React + TypeScript project on the GenixNode platform now! ⚡