Giriş ve kurulum

TypeScript Nedir

TypeScript, JavaScript'in üzerine statik tip sistemi ekleyen bir dildir. JavaScript'in bütün özelliklerini içerir; çalışan her JavaScript kodu aynı zamanda geçerli TypeScript kodudur.¹ Bu yüzden TypeScript'e JavaScript'in üst kümesi (superset) denir.

Fark şudur: değişkenlerin, fonksiyon parametrelerinin ve nesnelerin hangi tipte olduğunu yazarsınız (ya da TypeScript bunu kendisi çıkarır), kod çalışmadan önce bir tip denetleyicisi (type checker) bu tiplerin tutarlı olup olmadığını kontrol eder.²

Bu ders TypeScript'in ne olduğunu, bir projeye nasıl kurulduğunu ve tip kontrolünün nerede çalıştığını anlatır. Tipleri yazmayı sonraki derslerde adım adım öğreneceksiniz.

Neden Kullanılır

JavaScript dinamik tiplidir: bir değişkenin tipi ancak kod çalışınca belli olur. TypeScript bu bilgiyi kod yazarken verir. Bunun üç somut faydası vardır:

• Hatalar çalıştırmadan önce görünür. Yanlış tipte değer, yazım hatası olan property ya da çağrılmayı unutulan bir fonksiyon editörde kırmızı çizgiyle işaretlenir.²

• Editör sizi tanır. Otomatik tamamlama, bir nesnede hangi alanların olduğunu, bir fonksiyonun hangi parametreleri beklediğini gösterir.

• Değişiklik yapmak güvenlidir. Bir alanın adını değiştirdiğinizde onu kullanan her dosya hata verir; hiçbir yeri gözden kaçırmazsınız.

Sektör de bu yöne gitti. State of JS 2025 anketinde katılımcıların %40'ı yalnızca TypeScript yazdığını söyledi (2024'te %34); statik tip eksikliği hâlâ JavaScript'in en büyük sıkıntısı olarak gösteriliyor.³

İlk örnek

Sepet toplamını hesaplayan basit bir JavaScript kodu düşünün. Fiyatlardan biri API'den metin olarak gelmiş:

const cart = [
  { name: "Kablosuz Kulaklık", price: 1299 },
  { name: "Telefon Kılıfı", price: "249" },
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(total); // "1299249" — toplama değil, metin birleştirme

JavaScript hata vermez; yanlış sonucu sessizce üretir. Aynı kodu TypeScript ile, sepet elemanının şeklini tanımlayarak yazdığınızda hata kod çalışmadan yakalanır:

type CartItem = {
  name: string;
  price: number;
};

const cart: CartItem[] = [
  { name: "Kablosuz Kulaklık", price: 1299 },
  { name: "Telefon Kılıfı", price: "249" },
  // Hata: Type 'string' is not assignable to type 'number'.
];

type ile tip tanımlamayı Interface, type ve union dersinde ayrıntılı göreceksiniz.

Tipler Çalışma Anında Yoktur

Tarayıcılar ve Node.js TypeScript tiplerini anlamaz. Kod çalışmadan önce tipler silinir ve geriye düz JavaScript kalır. Handbook'un ifadesiyle tip açıklamaları programın çalışma davranışını hiçbir zaman değiştirmez.²

// Yazdığınız
function formatPrice(price: number): string {
  return `${price} TL`;
}

// Çalışan (tipler silindikten sonra)
function formatPrice(price) {
  return `${price} TL`;
}

Playground'da Deneyin

Kurulum yapmadan denemenin en kısa yolu TypeScript Playground'dur.⁴ Sol tarafa kod yazarsınız, hatalar anında altı çizili görünür, sağ tarafta tipleri silinmiş JavaScript çıktısını izlersiniz. Yazdığınız kodu bir link ile paylaşabilirsiniz; soru sorarken çok işe yarar.

Yukarıdaki sepet örneğini Playground'a yapıştırıp price: "249" satırının üzerine gelmeyi deneyin.

.ts ve .tsx

TypeScript dosyaları .ts uzantısını kullanır. İçinde JSX olan her dosya ise .tsx olmalıdır; bu uzantı TypeScript'e dosyada JSX olduğunu söyler.⁵

Yeni Proje: Vite ile React ve TypeScript

React ile TypeScript projesi başlatmanın en kolay yolu Vite'ın react-ts şablonudur.⁶

$ pnpm create vite@latest my-store -- --template react-ts

Şablonda src/main.tsx ve src/App.tsx hazır gelir; kök dizinde üç tsconfig dosyası (tsconfig.json, tsconfig.app.json, tsconfig.node.json) bulunur. package.json'daki build script'i tsc -b && vite build şeklindedir: önce tip kontrolü yapılır, hata varsa build durur.

tsconfig dosyaları derleyiciye hangi dosyaları hangi kurallarla kontrol edeceğini söyler; ayrıntısını tsconfig ve strict mod dersinde göreceksiniz.

Var Olan Projeye Eklemek

TypeScript bir npm paketidir ve tsc adında bir derleyici komutu getirir.² Projeye geliştirme bağımlılığı olarak kurulur:

$ pnpm add -D typescript

Ardından bir tsconfig.json oluşturun:

$ pnpm dlx tsc --init

TypeScript 7'de bu komut strict, noUncheckedIndexedAccess, verbatimModuleSyntax gibi önerilen ayarların açık olduğu bir dosya üretir. React projesinde ayrıca @types/react ve @types/react-dom paketlerini kurmanız gerekir.⁵ Sonra dosyaları birer birer .ts / .tsx yapmaya başlayabilirsiniz; JavaScript dosyaları çalışmaya devam eder.

Tip Kontrolünü Kim Yapar?

Bu, TypeScript'e yeni başlayanların en sık atladığı noktadır. Bir projede TypeScript iki ayrı işe yarar ve bu işleri farklı araçlar yapar:

Vite .ts dosyalarında yalnızca dönüştürme yapar ve tip kontrolü yapmaz; dokümantasyonu bu işi editöre ve build sürecine bırakır.⁷ Yani geliştirme sunucusu, tip hatası olan kodu da çalıştırır. Next.js de geliştirme sırasında kodu SWC ile derler; next build ise varsayılan olarak tip kontrolü yapar ve hata varsa build'i durdurur.⁸

Bu yüzden tip kontrolünü ayrıca çalıştırırsınız:

$ pnpm dlx tsc --noEmit

--noEmit, JavaScript dosyası üretmeden yalnızca kontrol yapar. Vite şablonunda ise doğru komut npx tsc -b'dir.

Pratikte tip hatalarını üç yerde görürsünüz: yazarken editörde, build sırasında ve CI'da. CI adımını tsconfig ve strict mod dersinde kuracağız.

Node.js ile Doğrudan Çalıştırmak

Node.js 22.18 ve 23.6 sürümlerinden itibaren .ts dosyalarını ek araç olmadan çalıştırabilir; özellik 24.12 ve 25.2'de kararlı (stable) oldu.⁹ Node tip yazımını boşlukla değiştirip kodu çalıştırır, buna type stripping denir.

$ node price.ts

Bu yöntemin iki sınırı vardır:⁹

• Tip kontrolü yapılmaz. Hatalı tipli kod da çalışır; kontrol için yine tsc gerekir.

• Yalnızca silinebilir söz dizimi desteklenir. enum, çalışma anı kodu olan namespace ve class parameter property'leri dönüştürme gerektirdiği için desteklenmez. .tsx dosyaları da çalışmaz ve tsconfig.json okunmaz.

Script'ler ve küçük araçlar için idealdir. React uygulamasında ise bu işi Vite ya da Next.js yapar.

TypeScript 7

8 Temmuz 2026'da yayımlanan TypeScript 7, derleyicinin Go diline taşınmış native sürümüdür. Tam build'lerde tipik olarak 8–12 kat hız sağlar; kurulumu ve tsc komutu aynı kalır.¹⁰ strict artık varsayılan olarak açıktır.

TypeScript 7 henüz bir JavaScript API'si sunmuyor. TypeScript'i kütüphane olarak kullanan araçlar (typescript-eslint, Vue, Svelte gibi) şimdilik 6.0 ile çalışır; bunun için @typescript/typescript6 paketi yayımlandı.¹⁰ Vite şablonunun hâlâ 6.0 kurmasının nedeni budur. Next.js ise next build sırasında projedeki tsc komutunu kullandığı için TypeScript 7 ile doğrudan çalışır.⁸

Yeni başlıyorsanız bu ayrım sizi çok etkilemez: 6.0'da temiz derlenen kod 7.0'da da aynı şekilde derlenir.¹⁰

Kendin Dene

• Playground'da ilk örnekteki CartItem tipini yazın, price değerini metin yapın ve hata mesajını okuyun.

• Aynı kodda bir alanın adını yanlış yazın (item.prise) ve TypeScript'in önerisine bakın.

• npm create vite@latest ile react-ts projesi açın, App.tsx içine bilerek bir tip hatası koyun; npm run dev çalışırken npx tsc -b ile hatayı görün.

• Bir price.ts dosyası yazıp node price.ts ile çalıştırın.

Detaylı Öğrenmek İçin

• Resmi doküman: TypeScript Handbook'un "The Basics" bölümü; statik tip kontrolü, tsc ve tiplerin silinmesi.²

• Kitap: Matt Pocock'un çevrimiçi okunabilen Total TypeScript Essentials kitabının "TypeScript In The Development Pipeline" bölümü.¹¹

• Kitap: Dan Vanderkam'ın Effective TypeScript kitabı (2. baskı, 2024, 83 madde).¹²

• Konuşma: Anders Hejlsberg'in TypeScript'in Go'ya taşınmasını anlattığı "A 10x faster TypeScript" videosu (Microsoft Developer, 2025, 14 dk).¹³

• Alıştırma: Bu derste denediğiniz her örnek TypeScript Playground'da çalışır.⁴