TypeScript Temelleri: Type Safety ile Daha Güvenli Kod

TypeScript, JavaScript'e statik tip sistemi ekleyen bir üst kümedir. Microsoft tarafından geliştirilen TypeScript, büyük ölçekli projelerde kod güvenliğini artırır, hataları derleme zamanında yakalar ve geliştirici deneyimini önemli ölçüde iyileştirir. Bugün modern web geliştirmenin standartlarından biri haline gelmiştir.

Neden TypeScript?

JavaScript dinamik tipli bir dildir — bir değişken herhangi bir türde değer alabilir. Bu esneklik küçük projelerde avantaj olsa da, büyük projelerde ciddi hatalara yol açabilir:

// JavaScript — hata çalışma zamanında ortaya çıkar
function hesapla(fiyat, kdv) {
  return fiyat * (1 + kdv);
}
hesapla("100", 0.18); // "1001.18" — beklenmedik sonuç!

// TypeScript — hata derleme zamanında yakalanır
function hesapla(fiyat: number, kdv: number): number {
  return fiyat * (1 + kdv);
}
hesapla("100", 0.18); // ❌ Derleme hatası!

Temel Tipler

TypeScript'in temel veri tipleri:

// Primitif tipler
let isim: string = "Ahmet";
let yas: number = 28;
let aktif: boolean = true;

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

// Tuple
let koordinat: [number, number] = [41.01, 28.97];

// Enum
enum Durum {
  Aktif = "AKTIF",
  Pasif = "PASIF",
  Beklemede = "BEKLEMEDE"
}

// Any ve Unknown
let belirsiz: any = "herhangi bir şey"; // tip kontrolü yok
let guvenli: unknown = "herhangi bir şey"; // kullanmadan önce kontrol gerekir

Interface ve Type

Nesne yapılarını tanımlamak için interface ve type kullanılır:

// Interface
interface Kullanici {
  id: number;
  isim: string;
  email: string;
  yas?: number; // opsiyonel
  readonly olusturma: Date; // salt okunur
}

// Type alias
type Sonuc = {
  basarili: boolean;
  mesaj: string;
};

// Genişletme
interface Admin extends Kullanici {
  yetki: string[];
}

// Intersection type
type AdminKullanici = Kullanici & {
  yetki: string[];
};

Genel kural olarak nesneler için interface, diğer tipler için type tercih edilir.

Generic Tipler

Generic'ler, farklı tiplerle çalışabilen yeniden kullanılabilir bileşenler oluşturmanızı sağlar:

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

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

// Generic interface
interface ApiYanit<T> {
  data: T;
  durum: number;
  mesaj: string;
}

type KullaniciYanit = ApiYanit<Kullanici>;
type UrunListesi = ApiYanit<Urun[]>;

// Generic kısıtlama
function ozellikAl<T, K extends keyof T>(nesne: T, anahtar: K): T[K] {
  return nesne[anahtar];
}

Union ve Intersection Types

// Union type — birden fazla tipten biri
type Kimlik = string | number;
type Durum = "yukleniyor" | "basarili" | "hata";

// Discriminated union
type Sekil =
  | { tur: "daire"; yaricap: number }
  | { tur: "kare"; kenar: number }
  | { tur: "dikdortgen"; en: number; boy: number };

function alan(sekil: Sekil): number {
  switch (sekil.tur) {
    case "daire":
      return Math.PI * sekil.yaricap ** 2;
    case "kare":
      return sekil.kenar ** 2;
    case "dikdortgen":
      return sekil.en * sekil.boy;
  }
}

Type Guards

Çalışma zamanında tip kontrolü yapmak için type guard'lar kullanılır:

// typeof guard
function isle(deger: string | number) {
  if (typeof deger === "string") {
    return deger.toUpperCase(); // TypeScript burada string olduğunu bilir
  }
  return deger.toFixed(2); // burada number
}

// Custom type guard
function kullaniciMi(nesne: any): nesne is Kullanici {
  return "email" in nesne && "isim" in nesne;
}

Utility Types

TypeScript, sık kullanılan tip dönüşümleri için yerleşik yardımcı tipler sunar:

interface Kullanici {
  id: number;
  isim: string;
  email: string;
}

Partial<Kullanici>   // tüm alanlar opsiyonel
Required<Kullanici>  // tüm alanlar zorunlu
Readonly<Kullanici>  // tüm alanlar salt okunur
Pick<Kullanici, "id" | "isim">  // sadece seçilen alanlar
Omit<Kullanici, "email">        // belirtilen alan hariç
Record<string, number>          // anahtar-değer eşlemesi

tsconfig.json Temelleri

TypeScript projesinin yapılandırma dosyası:

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

"strict": true ayarı, tüm katı tip kontrollerini etkinleştirir ve yeni projelerde mutlaka açık olmalıdır.