TypeScript Nedir? Temeller ve JavaScript'ten Geçiş

TypeScript nedir diye merak ediyorsan, en kısa cevap şu: JavaScript'in üzerine bir statik tip sistemi ekleyen, Microsoft tarafından geliştirilen açık kaynaklı bir dildir. Yazdığın her geçerli JavaScript kodu aynı zamanda geçerli bir TypeScript kodudur; üstüne tipler ekleyerek hataları kod daha çalışmadan, editöründe yakalarsın. Bu yazıda tip sisteminin temellerini, interface kullanımını ve mevcut bir projeye TypeScript'i tedrici (kademeli) olarak nasıl ekleyeceğini öğreneceksin.

TypeScript nedir ve neden var?

JavaScript dinamik tipli bir dildir: bir değişken bir an metin, bir sonraki an sayı olabilir. Küçük betiklerde bu esneklik rahat, ama proje büyüdükçe "undefined is not a function" gibi hatalar çalışma anında, yani kullanıcının karşısında patlar. TypeScript bu hataları derleme anında yakalar.

TypeScript'in kendisi tarayıcıda doğrudan çalışmaz. tsc (TypeScript Compiler) kodunu sade JavaScript'e derler/aktarır (transpile), tipler ise bu çıktıdan silinir. Yani tipler tamamen geliştirme aşamasına aittir; üretimde sıfır ek maliyet getirir.

function selamla(isim: string): string {
  return `Merhaba, ${isim}`;
}

selamla("Aslain"); // OK
selamla(42);        // Hata: 'number' tipi 'string' parametresine atanamaz

Temel tipler

TypeScript'te en sık kullanacağın ilkel (primitive) tipler JavaScript'tekilerle aynıdır: string, number, boolean. Bunlara diziler, null, undefined ve özel any tipi eklenir.

let baslik: string = "Blog";
let okuma: number = 5;
let yayinda: boolean = true;
let etiketler: string[] = ["web", "typescript"];

// Tuple: sabit uzunluk ve sıra
let koordinat: [number, number] = [41.0, 28.9];

Önemli bir nokta: çoğu zaman tipi tek tek yazman gerekmez. TypeScript tip çıkarımı (type inference) yapar. let okuma = 5 yazdığında derleyici zaten bunun number olduğunu anlar. Açık tip yazmayı genelde fonksiyon parametreleri ve dönüş değerleri için sakla.

any tipinden mümkün olduğunca kaçın; o, "tip kontrolünü kapat" demektir ve TypeScript'in tüm faydasını yok eder. Tipi gerçekten bilmiyorsan, daha güvenli olan unknown tipini kullan: onu kullanmadan önce bir kontrol yapmaya zorlar.

Interface ve type ile nesneleri şekillendirmek

Gerçek uygulamalarda en çok nesnelerin şeklini tanımlarsın. Bunun için iki araç var: interface ve type. Bir kullanıcıyı tanımlayalım:

interface Kullanici {
  id: number;
  isim: string;
  email: string;
  rol?: "admin" | "uye"; // ? = opsiyonel alan
}

const u: Kullanici = {
  id: 1,
  isim: "Aslain",
  email: "hello@aslain.dev",
};

Buradaki rol? alanı opsiyoneldir; "admin" | "uye" ise bir birleşim tipidir (union) ve değerin yalnızca bu iki metinden biri olabileceğini söyler. Yanlış bir metin yazarsan derleyici uyarır.

interface ile type çoğu durumda birbirinin yerine geçer. Pratik kural: nesne şekilleri için interface, birleşim ve takma adlar (alias) için type tercih edilir. interface'in bir avantajı, kalıtımla genişletilebilmesidir:

interface Yazar extends Kullanici {
  yaziSayisi: number;
}

Fonksiyonlar ve generic'ler

Fonksiyonlarda parametrelerin ve dönüş değerinin tipini belirtmek, kodun belgesi gibi davranır. Aynı mantığı farklı tiplerle yeniden kullanmak istediğinde ise generic (jenerik) tipler devreye girer:

function ilkEleman<T>(dizi: T[]): T | undefined {
  return dizi[0];
}

const sayi = ilkEleman([1, 2, 3]);      // tip: number
const metin = ilkEleman(["a", "b"]);    // tip: string

Buradaki T bir yer tutucudur. Fonksiyonu hangi tip diziyle çağırırsan, dönüş tipi de o tipe uyar. Generic'ler, Array, Promise<T> gibi yapıların temelidir ve tip güvenliğini esneklikle birleştirir.

Mevcut bir projeye tedrici geçiş

TypeScript'in en güçlü yanı, var olan bir JavaScript projesini tek seferde değiştirmek zorunda olmamandır. Geçiş adım adım yapılabilir:

• 1. Kur ve yapılandır. npm install --save-dev typescript ardından npx tsc --init ile bir tsconfig.json oluştur.
• 2. Esnek başla. Başta "strict": false ve "allowJs": true ile mevcut .js dosyalarının yanında çalışmaya devam et.
• 3. Dosya dosya çevir. Bir dosyayı .ts uzantısına çevir, tip hatalarını düzelt, sonra bir sonrakine geç.
• 4. Sıkılaştır. Proje stabilleştikçe "strict": true yap; bu, strictNullChecks dahil tüm katı kontrolleri açar ve en çok hatayı bu mod yakalar.

tsconfig.json için iyi bir başlangıç:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

Üçüncü parti kütüphaneler için çoğu zaman @types/... paketleri tip tanımları sağlar (örneğin npm i -D @types/node). Modern kütüphanelerin birçoğu tip tanımlarını kendi içinde gönderir, ek bir şey kurman gerekmez.

Sık Sorulan Sorular

TypeScript öğrenmek için önce JavaScript bilmem şart mı?

Evet. TypeScript bir üst katmandır, ayrı bir dil değildir. Fonksiyonlar, kapsam (scope), async/await ve nesneler gibi JavaScript temellerine hakimsen, TypeScript'in tip katmanı çok hızlı oturur. Sağlam bir JavaScript temeli olmadan tip hatalarını anlamak zor olur.

TypeScript projeyi yavaşlatır mı?

Çalışma anında hayır; tipler derleme sırasında silinir, üretimdeki kod sade JavaScript'tir. Tek ek maliyet derleme adımıdır, o da modern araçlarla saniyeler sürer ve karşılığında çok sayıda hatayı önler.

any kullanmak yasak mı?

Yasak değil ama son çare olmalı. Geçici olarak bir tipi atlatmak için işe yarar, fakat kalıcı any kullanımı tip kontrolünü kapatır. Tipi bilmiyorsan unknown, esnek nesneler için Record<string, T> gibi daha güvenli alternatifleri tercih et.

Tip güvenli bir tabana mı geçmek istiyorsun? Mevcut JavaScript projeni TypeScript'e taşımak veya sıfırdan tip güvenli bir uygulama kurmak için benimle iletişime geç, birlikte sağlam bir temel atalım.