Kod yazarken bir değişkenin string mi yoksa number mı olduğunu hatırlamaya çalışmak yorucu. Yanlış hatırladığında hata da çoğu zaman kullanıcıda patlar. TypeScript tam burada devreye girer ve bu sorunu daha sen yazarken yakalar.TypeScript, JavaScript'in üzerine tip sistemi ekleyen bir dildir. Yazdığın kod yine JavaScript'e derlenir, yani tarayıcı veya sunucu fark etmez. Aradaki fark, hataların çalışma anında değil yazım anında ortaya çıkmasıdır. Bu yazı tip güvenliğini pratik tarafıyla anlatıyor.
TypeScript tip sistemi ne kazandırır?
Bir fonksiyona yanlış türde veri geçtiğinde editör seni anında uyarır. Hata, kod canlıya çıkmadan önce ekranında belirir. Bu sayede saatlerce sürecek hata avları en baştan biter.Temel tipler basittir: string, number, boolean, array ve object. Ama asıl güç birleşim tiplerinde gizli. Bir değer birden çok tip alabilir, sen de hepsini açıkça belirtirsin.
type Durum = "bekliyor" | "onaylandi" | "iptal";
function islemYap(durum: Durum) {
// durum sadece bu üç değerden biri olabilir
}Bu yaklaşım yazım hatalarını kökten keser. "onaylandı" yerine "onaylndi" yazarsan editör hemen kırmızı çizer. Resmi belgelerdeki temel tipler bölümü bu kavramları örneklerle açıklıyor.
Generics ile tekrar kullanılabilir kod
Aynı işlevi farklı tipler için tekrar tekrar yazmak istemezsin. Generics tam bu yüzden var. Bir fonksiyonu tipten bağımsız tanımlar, çağırırken tipi belirlersin.
function ilkEleman<T>(dizi: T[]): T | undefined {
return dizi[0];
}
const sayi = ilkEleman([1, 2, 3]); // number
const metin = ilkEleman(["a", "b"]); // stringBurada T bir yer tutucudur. Fonksiyonu hangi diziyle çağırırsan dönüş tipi de ona göre ayarlanır. Tek bir fonksiyon yazarsın, her tip için ayrı çözüm üretmek zorunda kalmazsın. Generics özellikle API yanıtları ve veri katmanlarında işini çok kolaylaştırır.
Utility types ile tip dönüşümleri
TypeScript hazır gelen yardımcı tiplerle var olan tipleri dönüştürmene izin verir. Yeni bir tip tanımlamak yerine mevcut olanı şekillendirirsin. En çok kullanılanları aşağıdaki tabloda topladım.
Utility typeNe yapar
Partial<T> | Tüm alanları isteğe bağlı hale getirir
Required<T> | Tüm alanları zorunlu yapar
Pick<T, K> | Sadece seçilen alanları içeren yeni tip üretir
Omit<T, K> | Belirtilen alanları çıkararak yeni tip üretir
Record<K, V> | Anahtar değer eşlemesi olan bir tip tanımlar
Bir kullanıcı güncelleme formu düşün. Tüm alanlar zorunlu değildir, sadece değişenleri gönderirsin. Burada Partial tam aradığın şeydir. Aynı veri tipini hem oluşturma hem güncelleme için tekrar yazmana gerek kalmaz.
Strict mode neden açık olmalı?
TypeScript'in asıl koruması strict mode ile gelir. Bu ayar tsconfig dosyasından açılır ve birçok sıkı kontrolü bir arada etkinleştirir. Açık olmadığında dilin sağladığı güvencenin yarısını kaybedersin.En önemli iki kontrol strictNullChecks ve noImplicitAny ayarlarıdır. İlki null ve undefined değerlerini açıkça ele almanı zorunlu kılar. İkincisi ise tip belirtmediğin her değeri hata olarak işaretler.
{
"compilerOptions": {
"strict": true,
"noUncheckedIndexedAccess": true
}
}Kaçınman gereken bir alışkanlık da any tipini bol bol kullanmaktır. any, o değer için tüm tip kontrolünü kapatır. Tipini bilmediğin bir veri varsa any yerine unknown kullan. unknown seni kullanmadan önce tip kontrolü yapmaya zorlar ve böylece güvenliği korur.
Backend ve frontend tarafında faydaları
TypeScript sadece tarayıcı kodu için değildir. Node.js üzerinde backend yazarken de aynı güvenceyi alırsın. Deno ise TypeScript'i doğrudan, ayrı bir kurulum gerektirmeden çalıştırır. Bir API yanıtının tipini bir kez tanımlar, hem sunucuda hem istemcide paylaşırsın.Bu paylaşımlı tip yapısı ekipler için büyük kazanç. Backend bir alanın adını değiştirdiğinde frontend kodu derlenmez ve hata anında görünür. Veritabanı modellerinden API katmanına kadar her şey tutarlı kalır.Bu güvence frontend tarafında da kendini gösterir. React veya benzeri bir kütüphane ile çalışırken bileşenlere geçirdiğin verilerin tipini önceden bilirsin. Yanlış bir prop geçtiğinde sayfa açılmadan uyarı alırsın. Böylece kullanıcı bir hatayla karşılaşmadan sorun çözülür.
- Refactoring sırasında bozduğun yerleri derleyici sana gösterir.
- Editör otomatik tamamlama ile alan isimlerini hatırlatır.
- Yeni gelen geliştirici tipler sayesinde kodu daha hızlı kavrar.
- Test yazmadan önce bile birçok hata yakalanır.
Özetle ve sonraki adım
TypeScript, JavaScript projelerine düşük maliyetle ciddi bir güvenlik katmanı ekler. Tip sistemini, generics ve utility types yapılarını öğrendikçe daha az hata yazarsın. strict mode'u baştan açmak da uzun vadede sana zaman kazandırır.Kritm Cloud Solutions olarak TypeScript ve modern JavaScript ile özel yazılım geliştiriyoruz. Web, mobil ve API projelerini tip güvenli bir mimariyle kuruyor, bulut altyapımızda yayına alıyoruz. Hizmetlerimizi inceleyebilir, projen için bizimle iletişime geçebilirsin.
