JavaScript projesini TypeScript'e geçirmek: tsconfig, tipler ve adım adım dönüşüm

TypeScript, JavaScript'e tip sistemi ekler; yazım hatalarını, yanlış parametreleri ve undefined kaynaklı hataları kod çalışmadan yakalar. Var olan bir projeyi bir anda değil, adım adım geçirmek en sağlıklı yoldur.

1. Kurulum

npm install --save-dev typescript
npx tsc --init

Oluşan tsconfig.json dosyasında geçiş için başlangıçta şu ayarlar işe yarar:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    "strict": false,
    "noEmit": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler"
  },
  "include": ["src"]
}

allowJs sayesinde .js ve .ts dosyaları yan yana yaşar. Vite, Next.js gibi araçlar derlemeyi zaten yaptığı için noEmit ile TypeScript yalnızca kontrol yapar.

2. Dosyaları tek tek çevirmek

En az bağımlılığı olan dosyalardan (yardımcı fonksiyonlar, sabitler) başla. Uzantıyı .ts (React bileşenleri için .tsx) yap ve çıkan hataları düzelt. Her adımdan sonra uygulamanın çalıştığını kontrol et.

3. Tipleri tanımlamak

interface Kullanici {
  id: number;
  ad: string;
  eposta?: string; // isteğe bağlı
}

function selamla(k: Kullanici): string {
  return `Merhaba ${k.ad}`;
}

Dış kütüphanelerin tipleri çoğu zaman pakete dahildir; değilse npm i -D @types/paket-adi ile kurulur.

4. any ile dikkatli olmak

Geçişte takıldığın yerlerde any kullanmak hızlandırır ama tip kontrolünü tamamen kapatır. Gerçekten bilinmeyen veride unknown tercih et; kullanmadan önce kontrol etmeni zorunlu kılar:

function isle(veri: unknown) {
  if (typeof veri === "string") {
    console.log(veri.toUpperCase());
  }
}

5. strict moda geçmek

Dosyaların çoğu çevrildiğinde "strict": true yap. En çok hata strictNullChecks'ten gelir: null ya da undefined olabilecek değerleri kontrol etmeden kullanmak. Bu hatalar genellikle gerçek hatalardır, düzeltmeye değer.

Sık karşılaşılan sorunlar

• "Cannot find module" hatası: Yol takma adları (@/components) kullanıyorsan tsconfig.json içinde paths ayarını, paketleyicide de aynı takma adı tanımla.
• API'den gelen veri: TypeScript çalışma zamanında kontrol yapmaz. Dışarıdan gelen veriyi doğrulamak için Zod gibi bir şema kütüphanesi kullanılabilir.

Geçiş sırasında anlamadığın bir tip hatası çıkarsa hata mesajıyla birlikte ilgili kodu bu konunun altına ekleyebilirsin.