TypeScript Nedir? JavaScript'ten TypeScript'e Geçiş Rehberi

TypeScript Nedir? JavaScript'ten TypeScript'e Geçiş Rehberi

JavaScript, web geliştirmenin vazgeçilmez dili olmasına rağmen, büyük ölçekli projelerde tip güvenliği eksikliği ciddi sorunlara yol açabilir. Microsoft tarafından geliştirilen TypeScript, JavaScript'in üzerine inşa edilmiş, statik tip sistemi sunan bir programlama dilidir. Bu rehberde TypeScript'in ne olduğunu, neden tercih edilmesi gerektiğini ve JavaScript'ten nasıl geçiş yapılacağını adım adım inceleyeceğiz.

TypeScript Nedir?

TypeScript, JavaScript'in bir superset'idir. Bu, her geçerli JavaScript kodunun aynı zamanda geçerli bir TypeScript kodu olduğu anlamına gelir. TypeScript, derleme zamanında tip kontrolü yaparak hataları çalışma zamanından önce yakalamanızı sağlar.

// JavaScript
function topla(a, b) {
  return a + b;
}
topla("5", 3); // "53" - beklenmedik sonuç!

// TypeScript
function topla(a: number, b: number): number {
  return a + b;
}
topla("5", 3); // Derleme hatası! string tipinde argüman number'a atanamaz

Neden TypeScript Kullanmalısınız?

• Tip Güvenliği: Derleme zamanında hataları yakalayarak çalışma zamanı hatalarını büyük ölçüde azaltır.
• Gelişmiş IDE Desteği: Otomatik tamamlama, refactoring ve hata gösterimi gibi özelliklerle geliştirici deneyimini iyileştirir.
• Okunabilirlik: Tip tanımları kodun belgesi gibi çalışır, diğer geliştiricilerin kodu anlamasını kolaylaştırır.
• Büyük Proje Yönetimi: Modüler yapı ve güçlü tip sistemi sayesinde büyük ekiplerde kod tutarlılığını sağlar.
• Ekosistem: React, Angular, Vue, Node.js gibi popüler framework ve kütüphaneler TypeScript desteği sunar.

TypeScript Kurulumu ve İlk Proje

TypeScript'i kullanmaya başlamak için Node.js kurulu olmalıdır. Ardından aşağıdaki adımları izleyin:

# TypeScript'i global olarak kurun
npm install -g typescript

# Proje dizini oluşturun
mkdir ilk-ts-projem && cd ilk-ts-projem

# package.json oluşturun
npm init -y

# TypeScript yapılandırma dosyasını oluşturun
tsc --init

# İlk TypeScript dosyanızı oluşturun
touch index.ts

Oluşturulan tsconfig.json dosyası TypeScript derleyicisinin davranışını belirler. Temel bir yapılandırma:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

JavaScript'ten TypeScript'e Geçiş Stratejileri

Mevcut bir JavaScript projesini TypeScript'e geçirmek için iki ana strateji vardır:

1. Kademeli Geçiş (Önerilen)

Projenizi bir anda tamamen dönüştürmek yerine, dosya dosya geçiş yapmak en güvenli yaklaşımdır:

// Adım 1: .js dosyalarını .ts olarak yeniden adlandırın
// Adım 2: tsconfig.json'da allowJs: true ekleyin
{
  "compilerOptions": {
    "allowJs": true,        // JS dosyalarının derlenmesine izin ver
    "checkJs": false,       // JS dosyalarını kontrol etme (başlangıçta)
    "strict": false,        // Başlangıçta katı mod kapalı
    "noImplicitAny": false  // any tipine izin ver
  }
}

// Adım 3: Kritik dosyalardan başlayarak tip ekleyin
// Adım 4: strict seçeneklerini aşamalı olarak etkinleştirin

2. Tam Geçiş

Küçük projelerde tüm dosyaları tek seferde dönüştürebilirsiniz. Bu yaklaşım, projenin boyutuna bağlı olarak birkaç saat ile birkaç gün arasında sürebilir.

Temel TypeScript Kavramları

TypeScript'e geçişte bilmeniz gereken temel kavramlar:

Temel Tipler

// Primitif tipler
let isim: string = "Tarik";
let yas: number = 30;
let aktif: boolean = true;

// Array tipleri
let sayilar: number[] = [1, 2, 3];
let isimler: Array<string> = ["Ali", "Ayşe"];

// Object tipi
interface Kullanici {
  id: number;
  isim: string;
  email: string;
  yas?: number; // opsiyonel alan
}

const kullanici: Kullanici = {
  id: 1,
  isim: "Tarik Tunç",
  email: "tarik@example.com"
};

// Fonksiyon tipleri
function selamla(isim: string): string {
  return `Merhaba, ${isim}!`;
}

// Arrow function
const topla = (a: number, b: number): number => a + b;

Type Assertion

Bazen TypeScript'e bir değerin tipini siz daha iyi bilirsiniz. Bu durumda type assertion kullanabilirsiniz:

const inputElement = document.getElementById("email") as HTMLInputElement;
inputElement.value = "tarik@example.com";

// Alternatif sözdizimi (JSX ile uyumsuz)
const element = <HTMLInputElement>document.getElementById("email");

TypeScript ile Geliştirme Araçları

TypeScript deneyimini iyileştiren araçlar:

Yaygın Geçiş Hataları ve Çözümleri

JavaScript'ten TypeScript'e geçişte sıkça karşılaşılan hatalar:

• "Cannot find module" hatası: Kullandığınız kütüphanenin tip tanım dosyasını kurun: npm install @types/kütüphane-adı
• "Property does not exist" hatası: Object tiplerinizi interface veya type ile tanımlayın.
• "Implicit any" hatası: Fonksiyon parametrelerine ve dönüş değerlerine tip ekleyin.
• Üçüncü parti kütüphaneler: DefinitelyTyped (@types/*) deposunda tip tanımlarını arayın.

Sonuç

TypeScript, JavaScript ekosisteminin evriminde önemli bir adımdır. Tip güvenliği, gelişmiş IDE desteği ve büyük projelerde sürdürülebilirlik gibi avantajları, başlangıçtaki öğrenme eğrisini fazlasıyla telafi eder. Kademeli geçiş stratejisiyle mevcut projelerinizi güvenle TypeScript'e taşıyabilir, yeni projelerinizi ise doğrudan TypeScript ile başlatabilirsiniz.

JavaScript bilginiz, TypeScript öğrenmeniz için güçlü bir temeldir. TypeScript, JavaScript'in üzerine yalnızca tip sistemi ekler; yeni bir dil öğrenmek zorunda değilsiniz. Bu rehberdeki adımları izleyerek hemen bugün TypeScript yolculuğunuza başlayabilirsiniz.

Kaynaklar

• TypeScript Resmi Dokümantasyonu
• TypeScript Playground
• TypeScript GitHub Deposu
• JavaScript'ten TypeScript'e Geçiş Kılavuzu