TypeScript vs JavaScript: Farkları ve Örnekler

TypeScript, üzerine statik bir tip sistemi eklenmiş JavaScript'tir. Her JavaScript programı geçerli TypeScript sözdizimidir; TypeScript tip notasyonlarını, bunları kod çalışmadan önce kontrol eden bir derleyiciyi ve onları yeniden kaldıran bir derleme adımını ekler. Çalışma zamanında yalnızca JavaScript vardır, yani fark tamamen yayına almadan önce neyi öğrendiğinizdedir.

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

function total(products: Product[]): number {
    return products.reduce((sum, p) => sum + p.price, 0);
}

const cart: Product[] = [
    { name: "Keyboard", price: 49 },
    { name: "Mouse", price: 25 },
];

console.log(total(cart)); // 74

JavaScript'te aynı fonksiyon, bu koddan type Product = ..., : Product[] ve : number çıkarılmış halidir. Tipler derleyici ve editör için bilgi ekler; programın ne yaptığını değiştirmezler.

Bir Bakışta TypeScript vs JavaScript

Aynı Kod İki Dilde

İşte JavaScript'te bir fonksiyon. İçinde user nesnesinin nasıl görünmesi gerektiğini söyleyen hiçbir şey yok:

function greeting(user) {
    return `Hello, ${user.firstName} ${user.lastName}`;
}

greeting({ firstname: "Ada", lastName: "Lovelace" });
// "Hello, undefined Lovelace", no error anywhere

TypeScript sürümü biçimi bir kez belirtir ve yazım hatası kod çalışmadan önce bildirilir:

interface User {
    firstName: string;
    lastName: string;
}

function greeting(user: User): string {
    return `Hello, ${user.firstName} ${user.lastName}`;
}

greeting({ firstname: "Ada", lastName: "Lovelace" });
// error TS2561: Object literal may only specify known properties,
// but 'firstname' does not exist in type 'User'. Did you mean to write 'firstName'?

Sözdizimindeki farkın tamamı notasyonlardır. TypeScript kendine ait birkaç bildirim de ekler (interface, type, enum, Array<string> gibi generic'ler, private gibi erişim belirleyiciler), ama ifadeler, operatörler ve yerleşik nesneler JavaScript'e aittir.

TypeScript'in Yakalayıp JavaScript'in Yakalamadıkları

JavaScript tipleri sessizce dönüştürür. Bu hata, her zaman string olan form alanlarından gelen değerlerde sık görülür. Derleyicinin ne dediğini görmek için çalıştırın:

// This does not compile: strings where numbers are expected.
function sum(values: number[]): number {
    return values.reduce((a, b) => a + b, 0);
}

const fromForm = ["10", "20", "5"];
console.log(sum(fromForm));

index.ts(7,17): error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'number[]'.
  Type 'string' is not assignable to type 'number'.

JavaScript'te bu kod çalışır ve 010205 yazdırır, çünkü 0 + "10" string birleştirmesidir. TypeScript, string'ler dönüştürülene kadar derlemeyi reddeder; örneğin fromForm.map(Number) ile.

Diğer büyük kategori eksik olabilecek değerlerdir. Array.prototype.find hiçbir şey eşleşmediğinde undefined döndürür ve TypeScript sizi bununla ilgilenmeye zorlar:

// This does not compile: find() can return undefined.
const users = [
    { id: 1, name: "Ada" },
    { id: 2, name: "Grace" },
];

const user = users.find((u) => u.id === 3);
console.log(user.name.toUpperCase());

index.ts(8,13): error TS18048: 'user' is possibly 'undefined'.

Düz JavaScript sürümü çalışma zamanında TypeError: Cannot read properties of undefined (reading 'name') ile çöker. TypeScript'teki çözüm, derleyicinin gösterdiği durumu ele almaktır:

const users = [
    { id: 1, name: "Ada" },
    { id: 2, name: "Grace" },
];

for (const id of [2, 3]) {
    const user = users.find((u) => u.id === id);
    if (user) {
        console.log(user.name.toUpperCase()); // user is narrowed to the object type here
    } else {
        console.log(`no user with id ${id}`);
    }
}

Çıktı:

GRACE
no user with id 3

TypeScript'in yakalamadıkları: mantık hataları (yanlış bir formülün tipi doğrudur) ve programa çalışma zamanında giren verilerle ilgili her şey. User olarak tiplenmiş bir API yanıtı, onu gönderen sunucu kadar doğrudur, çünkü kod çalıştığında tipler artık yoktur. Bu tür verileri çalışma zamanı koduyla kontrol edin.

TypeScript'te JavaScript Kütüphaneleri Kullanmak

Çıktı zaten JavaScript olduğu için her npm paketi TypeScript'ten çalışır. Bir paketin tipleri şu üç yerden birinden gelir:

• Paket kendi .d.ts dosyalarıyla gelir. Aktif bakımı yapılan paketlerin çoğu böyledir ve ekstra bir şey kurmazsınız.
• Topluluğun DefinitelyTyped projesinden ayrı bir @types paketi: npm install --save-dev @types/lodash komutu lodash için tipleri ekler.
• Hiçbir yerden. Bu durumda strict açıkken import'un kendisi bir hatadır:

error TS7016: Could not find a declaration file for module 'lodash'. '/project/node_modules/lodash/lodash.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/lodash` if it exists or add a new declaration (.d.ts) file containing `declare module 'lodash';`

Çözüm, varsa @types paketini kurmak ya da modülü bir .d.ts dosyasında kendiniz tanımlamaktır; declaration files sayfası nasıl yapılacağını gösteriyor.

Derleme Adımı

Tarayıcılar ve Node.js tip kontrolü yapmaz, bu yüzden TypeScript'in kaynak kodunuz ile çalışan kod arasında bir adıma ihtiyacı vardır. Yaygın üç kurulum vardır:

• tsc her şeyi derler. Tipleri kontrol eder ve .js dosyalarını genellikle bir dist klasörüne yazar. Basittir ve kütüphaneler için standarttır.
• Bir bundler ya da geliştirme sunucusu tipleri kaldırır, tsc --noEmit ise kontrol eder. Vite ve esbuild tipleri kontrol etmeden siler, bu da yeniden yüklemeleri hızlı tutar; tip denetleyicisini editör ve bir CI adımı çalıştırır.
• Çalışma ortamı tipleri kaldırır. Güncel Node.js sürümleri, Deno ve Bun .ts dosyalarını doğrudan çalıştırır. Hiçbiri çalışırken tip kontrolü yapmaz, bu yüzden tip hatalarını bulmanın yolu yine tsc --noEmit (veya deno check) komutudur.

JavaScript'in bunların hiçbirine ihtiyacı yoktur ve küçük betikler için en büyük pratik avantajı budur. TypeScript adımının maliyeti çoğunlukla kurulumdur (bir tsconfig.json ve bir typescript geliştirme bağımlılığı) ve derleme süresidir; TypeScript 7'nin yerel derleyicisi bu süreyi büyük projelerde yaklaşık on kat kısalttı.

Öğrenme Eğrisi

JavaScript hakkında bildiğiniz her şey geçerliliğini korur, çünkü TypeScript'in çalışma zamanı JavaScript'tir. Yeni olan tip sistemidir ve katmanlar halinde gelir:

1. Değişkenler, parametreler ve dönüş değerleri üzerindeki notasyonlar (: string, : number[]).
2. interface ve type ile nesne tipleri, opsiyonel özellikler, string | number gibi union'lar.
3. Daraltma: bir değeri typeof, in veya === ile kontrol ederek derleyicinin hangi durumda olduğunuzu bilmesini sağlamak.
4. Generic'ler, Partial<T> ve Pick<T, K> gibi utility tipler ve kütüphane yazarları için ileri düzey tipler.

İlk iki katman uygulama kodunun çoğunu kapsar. Tiplerin büyük kısmı çıkarıldığı için çoğu TypeScript kodu, yalnızca fonksiyon imzalarında notasyon bulunan JavaScript gibi görünür.

TypeScript mi, JavaScript mi?

TypeScript, JavaScript'ten daha mı iyi? Birkaç kişinin bakımını yaptığı ya da yıllarca yaşayan kod için genellikle evet ve sektör de bu yöne gitti: GitHub'ın aylık katkıda bulunan sayısına göre TypeScript, Ağustos 2025'te hem JavaScript'i hem Python'u geçerek GitHub'da en çok kullanılan dil oldu. Küçük betikler için düz JavaScript çoğu zaman daha iyi bir araçtır.

TypeScript seçin, eğer:

• Kod üzerinde birden fazla kişi çalışıyorsa veya aylarca ya da yıllarca bakımı yapılacaksa.
• Kod tabanı, her fonksiyon imzasını aklınızda tutamayacağınız kadar büyükse.
• Sık sık yeniden düzenleme yapıyorsanız: bir özelliği yeniden adlandırmak her kullanımını günceller ve derleyici geride kalanları listeler.
• Bir kütüphane yayınlıyorsanız: .d.ts dosyaları kullanıcılarına otomatik tamamlama ve kontrol sağlar.
• Framework bunu bekliyorsa. Angular uygulamaları TypeScript ile yazılır, Next.js ve Astro yeni projeleri varsayılan olarak TypeScript ile oluşturur ve Vite'ın React, Vue ve Svelte şablonlarının her birinin bir TypeScript varyantı vardır.

JavaScript seçin, eğer:

• Program kısa bir betik, tek seferlik bir deneme ya da tarayıcı konsolunda bir kod parçasıysa.
• Programlamayı ilk kez öğreniyorsanız ve aynı anda daha az kavramla uğraşmak istiyorsanız.
• Bir derleme adımı yoksa ve istemiyorsanız. Bu durumda bile, düz bir .js dosyasında JSDoc ile birlikte // @ts-check size bir miktar kontrol sağlar.

Bir JavaScript Projesini TypeScript'e Taşımak

Taşıma tek seferde yapılmak zorunda değildir. Derleyici TypeScript'in yanında JavaScript'i de kabul eder:

{
    "compilerOptions": {
        "allowJs": true,
        "checkJs": false,
        "outDir": "dist",
        "rootDir": "src"
    },
    "include": ["src"]
}

allowJs ile .js dosyaları derlenir ve .ts dosyalarından import yapabilir, tersi de mümkündür. Sonra adım adım dönüştürün:

1. Bir dosyanın uzantısını .js yerine .ts yapın ve derleyicinin o dosyada bildirdiği hataları düzeltin.
2. Uç noktalardan (az import içeren yardımcı modüllerden) başlayın, sonra içeriye doğru ilerleyin.
3. Henüz adını değiştirmediğiniz dosyaları kontrol etmek için checkJs seçeneğini açın ya da tek tek .js dosyalarının en üstüne // @ts-check ekleyin.

Kontrol edilen JavaScript dosyalarında tipleri JSDoc yorumları sağlar:

// @ts-check

/**
 * @param {number} price
 * @param {number} qty
 * @returns {number}
 */
function lineTotal(price, qty) {
    return price * qty;
}

lineTotal("3", 2);
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Bazı ekipler burada durur: JSDoc tipleri olan, tsc tarafından kontrol edilen JavaScript dosyaları ve kodun kendisi için derleme adımı yok. Diğerleri sonuna kadar .ts'ye geçer. Mevcut bir projede strict seçeneğini açarsanız başta çok sayıda hata bekleyin; strict mode sayfası her bayrağın neyi kontrol ettiğini listeler, böylece onları birer birer açabilirsiniz.