TypeScript ile daha güvenli ve sürdürülebilir kod

Bir yazılım projesinin ilk birkaç haftasında JavaScript hızlı ve esnek hissettirir. Kod yazarsınız, çalışır, yayına alırsınız. Sorun, proje büyüdüğünde başlar: ekibe yeni geliştiriciler katılır, dosya sayısı yüzleri bulur ve bir fonksiyonun hangi veriyi beklediğini kimse tam olarak hatırlamaz. İşte tam bu noktada, kullanıcıya kadar ulaşan o sessiz "undefined is not a function" hataları ortaya çıkar.

TypeScript, JavaScript'in bu zayıf noktasını kapatmak için Microsoft tarafından geliştirilen, JavaScript'in üstüne kurulu bir dildir. Yazdığınız her şey aslında JavaScript'tir; fakat üzerine bir tip katmanı eklenmiştir. Bu katman, kod çalışmadan önce, daha siz yazarken hataları yakalar. Sonuç olarak daha az hata, daha okunabilir kod ve büyük ekiplerde çok daha sürdürülebilir bir geliştirme süreci elde edersiniz.

KaliteliWebsite olarak modern web projelerimizin neredeyse tamamını TypeScript ile geliştiriyoruz. Bu yazıda tip güvenliğinin neden önemli olduğunu, TypeScript'in temellerini, ileri seviye özelliklerini ve gerçek projelerde işe yarayan en iyi pratikleri somut kod örnekleriyle ele alıyoruz.

TypeScript Nedir ve Neden Ortaya Çıktı?

TypeScript, JavaScript'in bir üst kümesidir (superset). Yani geçerli her JavaScript kodu aynı zamanda geçerli bir TypeScript kodudur. Fark, TypeScript'in değişkenlere, fonksiyon parametrelerine ve dönüş değerlerine tip ekleme imkânı sunmasıdır. Bu tipler tarayıcıda çalışmaz; derleme (compile) aşamasında kontrol edilir ve ardından sade JavaScript'e dönüştürülür.

Dilin 2012'de doğuş nedeni nettir: JavaScript küçük scriptler için tasarlanmıştı, ancak bugün on binlerce satırlık uygulamalar JavaScript ile yazılıyor. Bu ölçekte, tip bilgisi olmadan kod tabanını güvenle değiştirmek neredeyse imkânsız hale gelir. TypeScript'in neden modern projelerde tercih edilmesi gerektiğini daha geniş bir perspektifle TypeScript neden zorunlu olmalı yazımızda derinlemesine tartışıyoruz.

JavaScript'in Sessiz Hataları

Tip güvenliğinin değerini anlamak için önce sorunu görmek gerekir. Aşağıdaki JavaScript kodu hiçbir uyarı vermeden çalışır, ama yanlış sonuç üretir:

function toplam(fiyat, adet) {
  return fiyat + adet
}

const sonuc = toplam('100', 5)

Burada fiyat bir metin (string) olarak geldiği için JavaScript sayıları toplamak yerine birleştirir ve sonuç "1005" olur. Bu hata test edilmezse doğrudan müşterinin faturasına yansır. JavaScript bunu çalışma zamanına kadar fark etmez; siz de çoğu zaman fark etmezsiniz.

Aynı kod TypeScript'te tip eklenerek yazıldığında, hatalı çağrı daha editörde kırmızı çizgiyle işaretlenir:

function toplam(fiyat: number, adet: number): number {
  return fiyat + adet
}

const sonuc = toplam('100', 5)

TypeScript burada "'100' bir metin, oysa number bekleniyor" diyerek kodu derlemenize izin vermez. Hata, müşteriye ulaşmadan, hatta siz kodu kaydetmeden önce yakalanmış olur. Tip güvenliğinin özü budur: hataları en ucuz oldukları anda, yani yazma anında yakalamak.

Tip Güvenliğinin Temelleri

TypeScript ile çalışmaya başlamak için karmaşık konuları bilmeniz gerekmez. Günlük geliştirmenin yüzde 80'i birkaç temel kavramla yürür.

Temel Tipler

En sık kullanılan tipler string, number, boolean, array ve object'tir. Çoğu durumda TypeScript tipi kendisi çıkarır (type inference), bu yüzden her yere tip yazmanıza gerek yoktur:

let isim = 'Ayşe'
let yas = 32
let aktifMi = true
let etiketler = ['react', 'typescript']

Burada TypeScript isim değişkeninin string, yas değişkeninin number olduğunu otomatik anlar. Tipleri esas olarak fonksiyon sınırlarında, yani parametre ve dönüş değerlerinde açıkça belirtmek en faydalı yaklaşımdır.

interface ve type

Gerçek uygulamalarda veriler genellikle nesne yapısındadır. Bir nesnenin şeklini tanımlamak için interface veya type kullanılır:

interface Kullanici {
  id: number
  ad: string
  email: string
  rol: 'admin' | 'editor' | 'uye'
  aktif: boolean
}

function selamla(kullanici: Kullanici): string {
  return 'Merhaba ' + kullanici.ad
}

Artık selamla fonksiyonuna eksik alanı olan ya da yanlış tipte bir nesne geçmeye çalıştığınızda TypeScript anında uyarır. interface ve type çoğu durumda birbirinin yerine kullanılabilir; pratik bir kural olarak nesne şekilleri için interface, birleşim (union) ve yardımcı tipler için type tercih edilir.

strict Mode: tsconfig Doğru Ayarlanmadan TypeScript Yarım Kalır

TypeScript kullanmanın en büyük tuzaklarından biri, projeyi gevşek ayarlarla kurup tip güvenliğinin yalnızca yarısından faydalanmaktır. Gerçek koruma, tsconfig.json dosyasındaki strict modu açtığınızda devreye girer:

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitAny": true,
    "target": "ES2022",
    "module": "ESNext"
  }
}

strict modu açık olduğunda TypeScript, tanımlanmamış değerleri (null ve undefined) zorla hesaba katmanızı ister. Örneğin bir dizide olmayan bir indekse erişmeye çalıştığınızda ya da bir nesnenin null olabileceği bir durumu kontrol etmeden kullandığınızda derleyici sizi durdurur. Türkiye'deki birçok ekibin TypeScript'ten beklediği faydayı görememesinin temel nedeni, strict modunu kapalı bırakmalarıdır. Bizim önerimiz net: yeni projelerde strict her zaman açık olmalıdır.

Generics ile Yeniden Kullanılabilir Kod

Generics (jenerik tipler), TypeScript'in en güçlü ama başta en korkutucu görünen özelliğidir. Aslında fikir basittir: bir fonksiyonun ya da yapının hangi tiple çalışacağını sabitlemek yerine, kullanıldığı yere göre belirlemesini sağlamak.

Şu fonksiyonu düşünün; bir dizinin ilk elemanını döndürür ve hangi tip dizi gelirse o tipte değer geri verir:

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

const ilkSayi = ilkEleman([10, 20, 30])
const ilkIsim = ilkEleman(['Ali', 'Veli'])

Burada ilkSayi otomatik olarak number, ilkIsim ise string tipinde kabul edilir. Aynı fonksiyonu her tip için ayrı ayrı yazmak zorunda kalmazsınız ve tip bilgisini de kaybetmezsiniz. Generics, özellikle API yanıtlarını sarmalayan yardımcı fonksiyonlarda ve veri katmanında hayat kurtarır.

Union Tipleri ve Tip Daraltma

Gerçek dünya verisi çoğu zaman birden fazla biçimde gelir. Union tipleri, bir değerin birkaç olası tipten biri olabileceğini ifade eder:

type ApiDurumu = 'yukleniyor' | 'basarili' | 'hata'

function mesajGoster(durum: ApiDurumu): string {
  if (durum === 'yukleniyor') {
    return 'Veriler getiriliyor...'
  }
  if (durum === 'hata') {
    return 'Bir sorun oluştu.'
  }
  return 'İşlem tamamlandı.'
}

Bu yapının güzelliği, eğer ileride ApiDurumu tipine yeni bir değer eklerseniz TypeScript'in ilgili tüm switch ve if bloklarında eksik durumu size hatırlatmasıdır. Buna "tip daraltma" (type narrowing) denir ve kodunuzu değişikliklere karşı dayanıklı kılar.

Çalışma Zamanı Doğrulaması: TypeScript'in Bittiği Yer

Burada kritik ve sık atlanan bir gerçeği vurgulamak gerekir: TypeScript yalnızca derleme zamanında çalışır. Kod tarayıcıya ya da sunucuya gittiğinde tipler silinir. Dolayısıyla bir API'den, bir formdan ya da bir veritabanından gelen veri için TypeScript size hiçbir garanti vermez; o veri sizin beklediğiniz tipte olmayabilir.

Bu boşluğu kapatmak için çalışma zamanı doğrulama kütüphaneleri kullanılır. Zod, bu alanda en yaygın tercihtir. Zod ile hem doğrulama yapar hem de TypeScript tipini aynı şemadan üretirsiniz:

import { z } from 'zod'

const KullaniciSemasi = z.object({
  id: z.number(),
  email: z.string().email(),
  yas: z.number().min(18),
})

type Kullanici = z.infer<typeof KullaniciSemasi>

const sonuc = KullaniciSemasi.safeParse(gelenVeri)
if (!sonuc.success) {
  console.error('Geçersiz veri:', sonuc.error)
}

Bu desen, dış dünyadan gelen veriyi uygulamanızın sınırında doğrular. Böylece içeride hem derleme zamanı (TypeScript) hem de çalışma zamanı (Zod) güvenliğine sahip olursunuz. Veritabanı katmanında benzer titizlikle çalışmak isterseniz veritabanı optimizasyonu yazımız sorgu ve şema tarafındaki iyi pratikleri tamamlayıcı niteliktedir.

IDE Desteği ve Geliştirici Deneyimi

TypeScript'in en sevilen yönlerinden biri, yalnızca hata yakalamakla kalmayıp geliştirme deneyimini kökten iyileştirmesidir. VS Code gibi editörlerde TypeScript şu somut avantajları sağlar:

• Akıllı otomatik tamamlama: Bir nesnenin hangi alanlara sahip olduğunu yazarken görürsünüz, dokümantasyona bakmaya gerek kalmaz.
• Güvenli yeniden adlandırma: Bir fonksiyonu ya da değişkeni yeniden adlandırdığınızda, editör tüm kullanım yerlerini güvenle günceller.
• Anında hata bildirimi: Hatalı bir kullanım, kod çalışmadan önce altı kırmızı çizilerek gösterilir.
• Kendini belgeleyen kod: Tipler, en güncel dokümantasyonun ta kendisidir. Bir fonksiyonun ne beklediğini imzasına bakarak anlarsınız.

Pratikte bu, yeni bir geliştiricinin projeye adapte olma süresini günlerden saatlere indirir. Büyük bir kod tabanında "bu fonksiyon neyi döndürüyor" sorusunun cevabını saniyeler içinde almak, ekip verimliliğini doğrudan etkiler.

React ve Next.js ile TypeScript

Modern web geliştirmede TypeScript en çok React ve Next.js ile birlikte kullanılır. Bileşen prop'larını tiplemek, hem hataları önler hem de bileşeninizi nasıl kullanacağını ekibe net biçimde anlatır:

interface ButonProps {
  etiket: string
  birincil?: boolean
  tiklandi: () => void
}

function Buton({ etiket, birincil = false, tiklandi }: ButonProps) {
  return null
}

Burada birincil prop'unun isteğe bağlı olduğu (soru işaretiyle), tiklandi'nin ise bir fonksiyon olması gerektiği açıkça bellidir. Bir geliştirici Buton bileşenini yanlış kullanmaya çalıştığında editör anında uyarır. KaliteliWebsite olarak sunduğumuz web geliştirme projelerinde bu disiplin, teslimattan sonra ortaya çıkan hata sayısını gözle görülür biçimde azaltıyor.

API Entegrasyonlarında Uçtan Uca Tip Güvenliği

Bir uygulamanın en kırılgan noktalarından biri, dış servislerle konuştuğu yerlerdir. Bir ödeme sağlayıcısı, bir kargo API'si ya da kendi backend'iniz... Bu sınırlarda tip güvenliği olmazsa, beklenmedik bir alan değişikliği tüm akışı sessizce bozabilir.

İyi bir yaklaşım, API yanıtını alır almaz tiplemek ve doğrulamaktır:

async function kullaniciGetir(id: number): Promise<Kullanici> {
  const yanit = await fetch('/api/kullanicilar/' + id)
  const veri = await yanit.json()
  return KullaniciSemasi.parse(veri)
}

Bu desende fonksiyonun her zaman geçerli bir Kullanici döndüreceği garanti altına alınır; veri beklenenden farklıysa hata anında ve net biçimde fırlatılır. Karmaşık API entegrasyonu projelerinde bu uçtan uca tip güvenliği, üçüncü taraf servislerdeki sürpriz değişiklikleri erkenden yakalamanın en etkili yoludur.

JavaScript Projesini TypeScript'e Taşımak

Mevcut bir JavaScript projesini bir gecede TypeScript'e çevirmek gerekmez; bu zaten önerilmez. Kademeli geçiş hem daha güvenli hem de daha gerçekçidir:

1. allowJs ile başlayın: TypeScript'i projeye ekleyin ama JavaScript dosyalarının da çalışmasına izin verin. Böylece her şeyi aynı anda değiştirmek zorunda kalmazsınız.
2. Dosyaları tek tek dönüştürün: En kritik ve en sık değişen modüllerden başlayarak dosyaları .ts uzantısına taşıyın.
3. any kullanımını sınırlayın: Geçiş sırasında geçici olarak any kullanmak normaldir, ancak bunu teknik borç olarak işaretleyip zamanla temizleyin.
4. strict modunu en sona açın: Tüm dosyalar dönüştükten sonra strict ayarını açarak son ve en değerli güvenlik katmanını devreye alın.

Bu adımlar, ekibin günlük işini durdurmadan, riski yöntemli biçimde azaltarak ilerlemesini sağlar.

En İyi Pratikler ve Kaçınılması Gereken Anti-Patternler

TypeScript'i kurmak yetmez; doğru kullanmak gerekir. Aşağıdaki tablo, sık karşılaşılan iki seçenek arasındaki farkı özetliyor:

Konu	Kaçınılması Gereken	Önerilen
Bilinmeyen tip	any kullanmak (tüm kontrolü kapatır)	unknown kullanıp daraltmak
Nesne şekli	Her yere satır içi tip yazmak	interface ile tanımlamak
Tip dönüştürme	Gereksiz "as" ile zorlamak	Tip daraltma ile güvenli geçiş
Null kontrolü	Değeri kör kullanmak	Açık null/undefined kontrolü
Şema	Manuel ve tekrar eden tipler	Zod ile tek kaynaktan üretmek

En önemli kural any'den uzak durmaktır. any yazdığınız anda TypeScript o değer için tüm kontrolü kapatır ve aslında JavaScript'e geri dönmüş olursunuz. Bilinmeyen bir veriyle çalışıyorsanız any yerine unknown kullanın; unknown sizi o değeri kullanmadan önce tipini kontrol etmeye zorlar ve güvenliği korur.

İkinci önemli pratik, tipleri tek bir kaynaktan türetmektir. Aynı veri yapısını hem manuel bir interface hem de bir Zod şeması olarak iki kez tanımlarsanız, biri güncellenip diğeri unutulduğunda hatalar başlar. Şemadan tip üretmek bu riski tamamen ortadan kaldırır.

Sıkça Sorulan Sorular

TypeScript öğrenmek zor mu?

Hayır. JavaScript bilen bir geliştirici, temel TypeScript kullanımına birkaç gün içinde geçebilir. Generics ve gelişmiş tipler gibi ileri konular zaman alır, ancak günlük işin büyük kısmı temel tiplerle yürür. Esas zorluk dilin kendisi değil, tip güvenliği disiplinini benimsemektir.

TypeScript projeyi yavaşlatır mı?

Çalışma zamanında değil. TypeScript derlendikten sonra sade JavaScript'e dönüşür, bu yüzden son kullanıcı tarafında hiçbir performans maliyeti yoktur. Yalnızca geliştirme sırasında bir derleme adımı eklenir ki bu da modern araçlarla saniyeler sürer.

Küçük bir proje için TypeScript gereksiz mi?

Çok küçük ve kısa ömürlü scriptler için JavaScript yeterli olabilir. Ancak büyüme ihtimali olan, birden fazla kişinin çalışacağı ya da uzun süre bakımı yapılacak her projede TypeScript baştan kullanmak, ileride çok daha fazla zaman kazandırır.

any ile unknown arasındaki fark nedir?

any tip kontrolünü tamamen kapatır ve hata riskini geri getirir. unknown ise "tipi henüz bilinmiyor" anlamına gelir ve onu kullanmadan önce tipini kontrol etmenizi zorunlu kılar. Güvenli kod için her zaman unknown tercih edilmelidir.

TypeScript çalışma zamanı hatalarını tamamen önler mi?

Hayır. TypeScript derleme zamanı hatalarını yakalar; dış kaynaklardan gelen veriler, ağ hataları ya da mantık hataları için ek önlemler gerekir. Bu yüzden Zod gibi çalışma zamanı doğrulama araçları TypeScript'i tamamlayan vazgeçilmez bir parçadır.

Sonuç

TypeScript, modern web geliştirmede artık bir tercih değil, ciddi projeler için bir standart haline geldi. Tip güvenliği sayesinde hatalar müşteriye ulaşmadan yakalanır, kod kendini belgeler, ekipler büyük kod tabanlarını güvenle değiştirebilir ve geliştirici deneyimi belirgin biçimde iyileşir. strict modu, generics, union tipleri ve Zod ile çalışma zamanı doğrulaması bir araya geldiğinde, uçtan uca güvenilir bir kod tabanına sahip olursunuz.

Projenizi sağlam bir teknik temel üzerine kurmak, TypeScript ile sürdürülebilir bir kod tabanı oluşturmak ya da mevcut bir JavaScript projesini güvenli biçimde modernleştirmek istiyorsanız size yardımcı olabiliriz. KaliteliWebsite olarak fiyatlarımız 10.000 TL'den başlar ve her proje ücretsiz bir keşif görüşmesiyle başlar. Bizimle iletişime geçin, ihtiyaçlarınızı birlikte değerlendirelim.