Skip to main content

⚙️ React Projelerinde TypeScript Kullanımı

🎯 Bu Rehberde Ne Öğreneceksiniz?​

Bu rehber, React projelerinize TypeScript ekleyerek tip güvenliği, akıllı tamamlama (IntelliSense) ve hata önleme avantajlarını nasıl elde edeceğinizi gösterir.
Parcel paketleyicisi ile proje kurulumunu yapacak, ardından hem İşlevsel (Functional) hem Sınıf (Class) bileşenlerde tip tanımlamayı öğreneceksiniz.

💻 Ön Koşullar​

Başlamadan önce:

  • Node.js ve npm kurulu olmalı
  • React hakkında temel bilginiz olmalı
  • Terminal komutlarını kullanabiliyor olmalısınız

1️⃣ Proje Kurulumu ve React Bağımlılıkları​

Yeni bir proje dizini oluşturun ve npm başlatın:

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

Bu işlem, package.json dosyasını oluşturur.

React kütüphanelerini yükleyin:


npm install react react-dom

2️⃣ HTML ve Kaynak Dosyalarını Hazırlama​

Kaynak klasörünü oluşturun:


mkdir src
cd src

index.html dosyasını oluşturun:


<!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 bileşenleri bu main div’ine yüklenir.

3️⃣ TypeScript ve Parcel Kurulumu​

Parcel (paketleyici) ve TypeScript'i kurun:


npm install --save-dev parcel typescript

React tip tanımlarını ekleyin:


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

package.json dosyanızı güncelleyin:


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

Bu betik, geliştirme sunucusunu başlatır.

4️⃣ Sayaç (Counter) Bileşeni Oluşturma​

Yeni bir Counter.tsx dosyası açın:


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>
    );
  }
}

Ardından App.tsx oluşturun:


import * as React from 'react';
import { render } from 'react-dom';
import Counter from './Counter';

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

5️⃣ Sunucuyu Başlatma​

Kök dizine dönün:


cd ..

Uygulamayı çalıştırın:


npm run dev

Tarayıcıda http://localhost:1234 adresine giderek sonucu görebilirsiniz.

6️⃣ TypeScript ile Tip Tanımlama​

🧩 İşlevsel Bileşen​


interface Props { baslangicDegeri: number; }

const Sayac: React.FC<Props> = ({ baslangicDegeri }) => (
  <h1>{baslangicDegeri}</h1>
);
export default Sayac;

Props arayüzü ile beklenen veri tiplerini belirtiyoruz.

🧱 Sınıf Bileşeni​


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

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

React.Component <Props, State> yapısı ile hem props hem state tiplendirilir.

⚙️ Varsayılan Nitelikler (defaultProps)​


interface Props { sayi?: number; }

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

❓ Sıkça Sorulan Sorular (SSS)​

  1. TypeScript React’ta ne işe yarar?

Hataları derleme sırasında yakalar, kod tamamlama sağlar, güvenli geliştirme ortamı sunar.

  1. CRA (Create React App) ile TypeScript kullanabilir miyim?

Evet. Sadece şu komutu girin:


npx create-react-app myapp --template typescript
  1. @types/react neden gerekli?

React saf JavaScript’tir. TypeScript’in onu anlaması için bu tip paketlere ihtiyaç vardır.

  1. Interface ile type farkı nedir?

Interface sınıf yapıları için, type ise birleşik ve özel tipler için kullanılır.

  1. Derleme süresi uzar mı?

Bir miktar evet, ancak bu hatasız ve güvenli kodun bedelidir.

🚀 Sonuç​

Artık React projelerinde TypeScript kullanarak daha güvenli, anlaşılır ve ölçeklenebilir kodlar yazabilirsin. Rabisu Bulut platformunda kendi React + TypeScript projenizi hemen deneyin! ⚡