Mert Özen Her Satırda Daha İleri
Frontend TypeScript Temel — #01

TypeScript Nedir, Neden Var? JavaScript'e Eklenen Tip Katmanı

Mert Özen 3 Kas 2026 6 dk 1 görüntülenme
TypeScript Nedir, Neden Var? JavaScript'e Eklenen Tip Katmanı

TypeScript'in JavaScript'e eklediği tip katmanını, derleme zamanı ile çalışma zamanı farkını, tip denetiminin neleri yakaladığını ve TypeScript 7 ile gelen değişiklikleri örneklerle görüyoruz.

Sürüm notu: Bu yazıdaki kodlar TypeScript 7.0 ve Node 26 içindir.

Önce Tahmin Et

JavaScript serilerinden tanıdığın bir kod parçasıyla başlayalım. Bunu düz JavaScript olarak çalıştırsan konsolda ne görürsün?

function getTotal(price, quantity) {
  return price * quantity;
}

const total = getTotal("100", 2);
console.log(total);

Bir tahmin yap: hata mı alırsın, yoksa bir sayı mı görürsün? İkinci soru da şu: bu kod bir canlı sistemde bir yıl boyunca çalışsa, sence sorun çıkarır mı? Cevabı birazdan, aynı kodu TypeScript'in gözünden okurken vereceğiz.

JavaScript'in Sessizce Geçtiği Hatalar

JavaScript serilerinde coercion'ı konuşmuştuk: JavaScript bir string ile bir sayıyı çarpmanı istediğinde itiraz etmez, string'i sayıya çevirip devam eder. Yukarıdaki kod 200 yazdırır. Bugün doğru sonucu verdi, ama tesadüfen. Yarın biri fiyatı "100 TL" diye gönderdiğinde sonuç NaN olur ve bunu ancak bir kullanıcı sepetinde garip bir toplam gördüğünde fark edersin.

JavaScript'in hataları iki gruba ayrılır. Bir kısmı kod çalıştığı anda patlar: tanımlı olmayan bir fonksiyonu çağırmak gibi. Daha sinsi olan ikinci grup ise hiç patlamaz; yanlış bir değerle sessizce yoluna devam eder. Bir property adını yanlış yazmak (user.nmae), bir sayının üzerinde string method'u çağırmaya çalışmak, bir fonksiyona beklediğinden farklı tipte bir argüman göndermek bu gruptandır. Bu hataları yakalamak için kodu çalıştırman, doğru senaryoyu tetiklemen ve şansının yaver gitmesi gerekir.

TypeScript Nedir? Tek Cümlelik Cevap

TypeScript, JavaScript'in üzerine bir tip sistemi ekleyen ve kodunu çalıştırmadan önce bu tiplere göre denetleyen bir dildir. Microsoft tarafından geliştirilir ve açık kaynaktır.

En önemli fikir şu: TypeScript bir superset'tir. Geçerli her JavaScript kodu, aynı zamanda geçerli bir TypeScript kodudur. Yeni bir dil öğrenmiyorsun; zaten bildiğin dile, değişkenlerinin ve fonksiyonlarının ne tür değerler taşıdığını söyleyen bir katman ekliyorsun. Yukarıdaki fonksiyonu TypeScript ile şöyle yazarız:

function getTotal(price: number, quantity: number) {
  return price * quantity;
}

// Hata: Argument of type 'string' is not assignable to parameter of type 'number'.
const total = getTotal("100", 2);
console.log(total);

Parametrelerin yanındaki : number bir type annotation. "Bu fonksiyon iki sayı bekler" diyoruz. Artık getTotal("100", 2) satırı daha kod çalışmadan, editörde yazdığın anda kırmızıyla işaretlenir. TypeScript derleyicisi hatayı şöyle raporlar:

error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Baştaki sorunun cevabı da burada: düz JavaScript'te kod çalışır ve 200 yazdırır, ama hatalı bir kod çalışır. TypeScript ise aynı kodu hiç çalıştırmadan reddeder.

İki Ayrı An: Derleme Zamanı ve Çalışma Zamanı

TypeScript'i anlamanın anahtarı, iki ayrı anı birbirinden ayırmaktır. Derleme zamanında (compile time) TypeScript derleyicisi kodunu okur, tipleri denetler ve hataları raporlar. Çalışma zamanında (runtime) ise kodunu çalıştıran şey yine bir JavaScript motorudur: tarayıcı ya da Node.js. Tarayıcılar TypeScript bilmez; TypeScript kodu çalışmadan önce düz JavaScript'e dönüştürülür.

Bu dönüşümde bütün tipler silinir. Şu kodu düşün:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("Ada")); // Hello, Ada!

Derleyici bunu JavaScript'e çevirdiğinde ortaya çıkan kod, annotation'ların silinmiş hâlidir:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Ada"));

Bunu bir inşaatın iskelesi gibi düşün. İskele, bina yapılırken işçilerin güvenle çalışmasını sağlar; bina bittiğinde sökülür ve binada iz kalmaz. Tipler de geliştirme sırasında seni korur, sonra sökülür. Bunun önemli bir sonucu var: TypeScript çalışma zamanında hiçbir şeyi denetlemez. Bir API'den beklenmedik bir veri gelirse, tipler sen onu elle doğrulamadıkça seni korumaz. Bu konuya ilerleyen yazılarda, unknown type'ı ve type guard'larla birlikte döneceğiz.

Tip Denetimi Neleri Yakalar?

TypeScript'in sana ilk günden kazandırdığı şeyleri bir örnekle görelim:

const user = { name: "Ada", age: 36 };

// Hata: Property 'nmae' does not exist on type '{ name: string; age: number; }'.
console.log(user.nmae);

// Hata: Property 'toUpperCase' does not exist on type 'number'.
user.age.toUpperCase();

Dikkat et, burada hiç annotation yazmadık. TypeScript, user object'inin içinde name adında bir string ve age adında bir number olduğunu kendisi çıkardı. Buna type inference denir ve TypeScript'te yazdığın kodun büyük kısmında tip yazmana gerek kalmaz. Ne zaman tip yazıp ne zaman inference'a güvenmen gerektiğini ayrı bir yazıda ele alacağız.

Yakalanan hatalar sadece yazım yanlışlarıyla sınırlı değil. Editörün de değişir: user. yazdığın anda hangi property'lerin var olduğunu listeler, bir fonksiyonun hangi parametreleri beklediğini gösterir, bir property'nin adını değiştirdiğinde onu kullanan her yeri birlikte günceller. Büyük bir kod tabanında bu, haritası olan bir şehirde dolaşmakla haritasız dolaşmak arasındaki farktır.

TypeScript Ne Değildir?

Birkaç yanlış beklentiyi baştan temizleyelim. TypeScript kodunu daha hızlı çalıştırmaz; çalışan şey yine aynı JavaScript'tir. Tüm hataları da yakalamaz; mantık hatalarını, yanlış hesaplanan bir indirimi ya da hatalı bir if koşulunu senin yerine bulamaz. Ve TypeScript bir framework değildir; herhangi bir JavaScript projesinde, tarayıcıda ya da sunucuda kullanılabilen bir dildir.

Bir de maliyeti var: tip yazmak ve derleyicinin uyarılarıyla uğraşmak başta yavaşlatıcı gelebilir. Küçük, tek seferlik bir script için bu maliyet kazancından büyük olabilir. Ama birden fazla kişinin dokunduğu, aylarca yaşayacak her projede tip sistemi kendini çok hızlı amorti eder.

Kısa Bir Tarih ve Bugünkü TypeScript

TypeScript 2012'de yayımlandı ve ilk on yılında derleyicisi TypeScript ile yazıldı. 2026'nın Temmuz ayında çıkan TypeScript 7.0 ile derleyici Go diliyle baştan yazıldı; büyük projelerde tip denetimi kat kat hızlandı. Dil olarak yazdığın kod değişmedi, ama daha önce 6.0 ile gelen yeni varsayılanlar 7.0'da da geçerli: yeni bir projede strict mod artık varsayılan olarak açık. Bu serideki bütün örnekler bu güncel varsayılanlarla yazıldı. TypeScript 7'nin getirdiklerini serinin sonunda ayrıca konuşacağız.

Bu Seriler Nasıl İlerleyecek?

TypeScript'i üç seri hâlinde anlatıyoruz. Temel seride ortamı kuracak, type inference ve annotation'ı, temel tipleri, array ve object tiplerini, union'ları ve narrowing'i, fonksiyonları, tsconfig'i ve tarayıcıda TypeScript'i göreceğiz. Orta seride generic'lere, class'lara, utility type'lara, type guard'lara, modüllere ve declaration dosyalarına geçeceğiz. İleri seride ise conditional ve mapped type'larla tip seviyesinde programlamaya, decorator'lara ve TypeScript 7'nin ayrıntılarına ineceğiz.

JavaScript serilerini okuduğunu varsayıyoruz; dilin kendisini tekrar anlatmayacağız. Her yazıdaki örnekleri ister TypeScript Playground'da, ister kendi bilgisayarında çalıştırabileceksin.

Küçük Bir Deneme

★☆☆ Tarayıcında typescriptlang.org/play adresini aç. Bu yazıdaki getTotal örneğini yapıştır ve hatalı satırın altındaki kırmızı çizginin üzerine gel. Mesajı oku, sonra "100" yerine 100 yaz ve hatanın kaybolduğunu gör.

★★☆ Playground'da sağdaki ".JS" sekmesine geç ve greet fonksiyonunun JavaScript çıktısına bak. Annotation'ların nereye gittiğini kendi gözünle doğrula.

★★☆ Derlenir mi, tahmin et, sonra dene: const count = 5; count.toFixed(2); ve const label = "5"; label.toFixed(2);. Hiç annotation yazmadığın hâlde TypeScript ikinci satıra neden itiraz ediyor?

Playground denemeler için harika, ama gerçek projeler kendi bilgisayarında yaşar. Bir sonraki yazıda TypeScript'i kuracak, kodu hem çalıştırmayı hem de tip denetiminden geçirmeyi göreceğiz; ikisinin neden aynı şey olmadığını da orada konuşacağız.