TypeScript Nedir? Yeni Başlayanlar İçin Örneklerle Giriş

TypeScript nedir? Statik tiplere sahip JavaScript'tir. Değişkenlere, parametrelere ve dönüş değerlerine tip notasyonları eklersiniz, TypeScript derleyicisi bunları program çalışmadan önce kontrol eder ve tipleri kaldırılmış düz JavaScript üretir. Bu JavaScript, JavaScript'in çalıştığı her yerde çalışır: tarayıcılarda, Node.js, Deno ve Bun'da.

İşte küçük bir TypeScript programı. Run'a basın.

interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

Çıktı:

Ada is 36 years old
82.33333333333333

İki nokta üst üsteden sonraki kısımlar (: string, : User, : number[]) ve interface dışında bu kod JavaScript'tir. Bu eklemeler derleyiciye her değerin ne olabileceğini söyler. total değişkeninin notasyonu olmadığına dikkat edin: TypeScript onun bir sayı olduğunu kendisi çıkarır. Çoğu TypeScript kodu fonksiyon sınırlarına tip yazar, gerisini derleyicinin çıkarmasına bırakır.

Tip Denetleyicisinin Yakaladıkları

Notasyonların amacı, hataların bir kullanıcı onlara takıldığında değil, siz kodu yazarken ortaya çıkmasıdır. Bu bloğu çalıştırın ve çıktıyı okuyun:

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

Program hiç başlamaz. Derleyici bunun yerine iki hata yazdırır:

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

Her hata dosyayı, satır ve sütunu, bir hata kodunu (TS2322) ve neyin yanlış olduğunu belirtir. Düz JavaScript'te iki satır da çalışır ve ikincisi hiçbir uyarı vermeden Linus is undefined years old yazdırırdı. VS Code gibi bir editörde aynı hatalar siz yazarken kırmızı alt çizgiler olarak görünür; user nesnesinin tam olarak bir name ve bir age alanı olduğunu bilen otomatik tamamlama da cabası.

Denetleyicinin yakaladığı tipik hatalar:

• Yanlış yazılmış bir özellik veya metot adı (user.nmae, list.lenght).
• Bir fonksiyonu çok az ya da çok fazla argümanla, veya yanlış tipte argümanlarla çağırmak.
• null veya undefined olabilecek bir değeri önce kontrol etmeden kullanmak.
• Kod kapsamlı (exhaustive) bir kontrol kullandığında, "loading" | "done" | "error" gibi bir union'ın bir durumunu ele almayı unutmak.
• Bağımlı olduğunuz bir fonksiyonun imzası değiştiğinde bozulan kod.

Tipler Çalışma Zamanında Kaybolur

TypeScript'in tipleri yalnızca derleme zamanında vardır. Derleyici onları kontrol eder ve sonra siler: ürettiği JavaScript'te ne notasyon ne de interface bulunur ve elle yazdığınız JavaScript ile tamamen aynı şekilde çalışır.

Bu girdi:

function double(n: number): number {
    return n * 2;
}

şu çıktıya dönüşür:

function double(n) {
    return n * 2;
}

Bu yüzden TypeScript, program çalışırken gelen değerleri kontrol edemez. Burada JSON metni bir User olduğunu iddia ediyor, derleyici bu iddiaya güvenmek zorunda ve çalışma zamanında da hiçbir şey şikayet etmiyor:

interface User {
    name: string;
    age: number;
}

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

Çıktı:

string
thirty-six1

Program dışından gelen veriler (API yanıtları, form girdileri, dosyalar) bir çalışma zamanı kontrolüne ihtiyaç duyar; örneğin değeri inceleyen bir type guard fonksiyonu. TypeScript bu kontrole güvenir ve tipi sizin için daraltır.

TypeScript'i Kim ve Neden Yaptı

TypeScript Microsoft'ta geliştirildi ve tasarımını Anders Hejlsberg (C#'ın tasarımcısı) yönetti. Ekim 2012'de 0.8 sürümüyle herkese açıldı, 1.0 ise Nisan 2014'te geldi. Apache 2.0 lisansı altında açık kaynaklıdır ve GitHub üzerinde geliştirilir. GitHub'ın aylık katkıda bulunan sayısına göre TypeScript, Ağustos 2025'te Python ve JavaScript'i geride bırakarak GitHub'da en çok kullanılan dil oldu.

Çıkış noktası büyük JavaScript kod tabanlarıydı. JavaScript'te "bu fonksiyon bir kullanıcı nesnesi alır" demenin bir yolu yoktur; bu yüzden bir özelliği yeniden adlandırmak veya bir fonksiyonu değiştirmek, tüm kod tabanını aramak ve testlerin her çağıranı kapsadığını ummak demekti. TypeScript bu bilgiyi JavaScript ile tam uyumluluğu koruyarak ekler:

• Bir üst kümedir. Geçerli JavaScript geçerli TypeScript sözdizimidir, bu yüzden bir proje dosya dosya geçiş yapabilir.
• JavaScript'i takip eder. enum ve namespace gibi birkaç erken ekleme dışında TypeScript kendine ait çalışma zamanı özelliği eklemez; yeni sözdizimi JavaScript standardından gelir.
• Tiplerin çalışma zamanında maliyeti yoktur. Silinirler, bu yüzden çıktı elle yazılmış JavaScript kadar hızlıdır.

Güncel ana sürüm TypeScript 7'dir. Derleyicisi Go ile yerel bir program olarak yeniden yazıldı ve büyük projelerde tip kontrolünü, yerini aldığı JavaScript tabanlı derleyiciden kabaca on kat daha hızlı yapar. Nelerin değiştiğini TypeScript 7 sayfası anlatıyor.

TypeScript Ne İşe Yarar? Frontend ve Backend

TypeScript, JavaScript ile aynı yazılımlar için, hem frontend hem backend tarafında kullanılır. Çıktı JavaScript olduğu için TypeScript, JavaScript'in gittiği her yere gider:

Aynı dil bir web uygulamasının iki tarafını da kapsar; bu yüzden pek çok ekip tip tanımlarını (örneğin bir API yanıtının biçimini) sunucu ve tarayıcı kodu arasında paylaşır.

TypeScript Kodu Nasıl JavaScript'e Dönüşür

Birbirinden ayrı iki iş vardır ve her birini farklı araçlar yapar:

1. Tip kontrolü. Bunu yalnızca TypeScript derleyicisi yapar, genellikle tsc komutu olarak (Deno'nun deno check komutu aynı derleyicinin bir kopyasını çalıştırır). .ts dosyalarınızı okur, hataları bildirir ve varsayılan olarak .js dosyalarını da yazar.
2. Tiplerin kaldırılması. Bunu tsc yapabilir; tip kontrolünü tamamen atlayan daha hızlı araçlar da yapabilir: esbuild, SWC, Babel ve Node.js, Deno ile Bun'a yerleşik tip silme.

Yaygın bir kurulum, kodu çalıştırmak için hızlı bir araç, editörde ve CI'da ise tsc --noEmit (yalnızca kontrol et, hiçbir şey yazma) kullanır. tsc kurulumu ve bir .ts dosyasını çalıştırmak bu bölümde ayrı sayfalarda anlatılıyor.

Temel Özellikler Tek Bir Örnekte

Günlük TypeScript az sayıda özellik kullanır. Bu blok başlıcalarını bir arada gösteriyor:

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

Çıktı:

Ada ada@example.com
Ada can log in
Linus is banned

• Tip notasyonları (name: string) bir değişkenin, parametrenin, özelliğin veya dönüş değerinin ne tuttuğunu belirtir.
• Tip çıkarımı yazmadığınız tipleri doldurur: account tipini first fonksiyonunun döndürdüğü değerden alır.
• Interface'ler ve type alias'lar (interface Account, type Status) verilerinizin biçimine bir ad verir.
• Union tipler ("active" | "banned", T | undefined) birkaç şeyden biri olan bir değeri tanımlar.
• Daraltma (narrowing): account !== undefined gibi bir kontrolden sonra derleyici, blok içinde hangi durumun geçerli olduğunu bilir.
• Opsiyonel özellikler (email?: string) eksik olabilir, bu yüzden tipleri undefined içerir.
• Generic'ler (first<T>) tek bir fonksiyonun veya tipin birçok tiple çalışmasını sağlarken aralarındaki bağı korur: içeri bir Account dizisi girer, dışarı bir Account çıkar.

Önce JavaScript Öğrenmek Gerekir mi?

Yardımcı olur ama ikisini birlikte de öğrenebilirsiniz. TypeScript kodunun çalışma zamanındaki davranışıyla ilgili her şey (değişkenler, fonksiyonlar, nesneler, diziler, promise'ler, sınıflar) JavaScript'tir; TypeScript bu değerleri tanımlayan bir katman ekler. JavaScript'i zaten biliyorsanız yeni olan kısım tip sistemidir: notasyonlar, interface'ler, union'lar, generic'ler ve daraltma. İkisinde de yeniyseniz JavaScript değerleri ve fonksiyonlarının temelleriyle başlayın, ilerledikçe tipleri ekleyin; derleyicinin hata mesajları iyi bir öğretmendir, çünkü bir değerin yanlış kullanıldığı satırı tam olarak gösterirler.

TypeScript öğrenmek için pratik bir sıra: kurun ve ilk dosyanızı çalıştırın, temel tipleri ve nesne tiplerini öğrenin, ardından union tipler ve daraltma, sonra da fonksiyonlar ve generic'ler. Bu, uygulama kodunun büyük kısmını kapsar.