TypeScript Nedir? JavaScript ile Farkları

01TypeScript Nedir?

TypeScript nedir sorusuna en kısa yanıt: tip bilgisi eklenmiş JavaScript. Teknik dilde TypeScript, JavaScript'in bir üst kümesidir; geçerli her JavaScript kodu aynı zamanda geçerli TypeScript kodudur. Üstüne yalnızca tür tanımları ve bunları denetleyen bir derleyici eklenir.

Tarayıcılar ve Node.js TypeScript'i doğrudan çalıştırmak için tasarlanmamıştır. Bu yüzden kod önce derleyiciden geçer, tür bilgileri silinir ve ortaya düz JavaScript çıkar. Yani TypeScript'in faydası geliştirme anındadır; kullanıcıya giden kod yine JavaScript'tir.

Dil ilk kez 2012'de duyuruldu ve zamanla web geliştirmenin ana akım araçlarından biri hâline geldi. Bugün birçok popüler kütüphane doğrudan TypeScript ile yazılıyor, yeni proje oluşturma araçlarının çoğu da kurulumda TypeScript seçeneğini ilk sırada sunuyor. Bu yaygınlık, öğrenilen bilginin farklı projelere kolayca taşınabilmesi anlamına geliyor.

Dilin temelini bilmeyen biri için TypeScript'e doğrudan başlamak zorlayıcı olabilir. Önce JavaScript nedir yazısındaki kavramları oturtmak, tip sisteminin neyi çözdüğünü anlamayı kolaylaştırır.

02Tip Güvenliği Hataları Nasıl Yakalar?

JavaScript dinamik tiplidir: bir değişkene önce sayı, sonra metin atayabilirsiniz ve dil itiraz etmez. Küçük betiklerde bu esneklik rahattır; ama yüzlerce dosyalık bir projede, bir fonksiyonun beklediği verinin değiştiğini fark etmek çoğu zaman canlıda hata çıktığında olur.

Tip güvenliği, her verinin şeklinin önceden tanımlanması ve bu tanıma uymayan kullanımın derleme sırasında reddedilmesidir. Aşağıdaki örnekte yanlış alan adı ya da yanlış tür, kod çalışmadan editörde kırmızı çizgiyle işaretlenir.

interface Siparis {
  id: number;
  musteri: string;
  tutar: number;
  odendi: boolean;
}

function ozetYaz(s: Siparis): string {
  return `${s.musteri} - ${s.tutar.toFixed(2)}`;
}

ozetYaz({ id: 1, musteri: "Ayşe", tutar: 150, odendi: true }); // geçerli
ozetYaz({ id: 2, musteri: "Can", tutar: "150", odendi: false });
// Hata: 'string' türü 'number' türüne atanamaz.

Editör Desteği

Tür bilgisi yalnız hata yakalamaz; editöre de akıl verir. Bir nesnenin hangi alanları olduğu otomatik tamamlanır, bir fonksiyonun ne beklediği üzerine gelince görünür, bir alanın adını değiştirdiğinizde bütün kullanımları güvenle güncellenir. Bu güvenli yeniden düzenleme (refactoring) büyük kod tabanlarında ciddi zaman kazandırır.

03TypeScript ile JavaScript Farkı

TypeScript JavaScript farkı çalışma zamanında değil, geliştirme sürecindedir. Aşağıdaki tablo iki dili günlük kullanım açısından karşılaştırır:

04TypeScript Avantajları

TypeScript avantajları en çok proje büyüdükçe ve ekip kalabalıklaştıkça hissedilir. Tek kişinin yazdığı kısa bir betikte fark küçüktür; beş geliştiricinin iki yıl boyunca üzerinde çalıştığı bir sistemde ise belirleyicidir.

• Erken hata tespiti: Yazım hataları, eksik alanlar ve yanlış türler kod çalışmadan görülür.
• Kendini belgeleyen kod: Bir fonksiyonun girdisi ve çıktısı türlerden okunur; ayrı belgeye daha az ihtiyaç duyulur.
• Güvenli değişiklik: Veri modelindeki bir değişikliğin etkilediği bütün dosyalar derleyici tarafından listelenir.
• Ekip içi sözleşme: Ön yüz ile arka yüz arasında paylaşılan türler, API'nin ne döndürdüğünü netleştirir.
• Geniş ekosistem desteği: React, Next.js, Node.js ve yaygın kütüphanelerin çoğu tür tanımlarıyla birlikte gelir.

Dezavantajları da Var

TypeScript bedava değildir. Derleme adımı ve yapılandırma eklenir, karmaşık tür tanımları yeni başlayanı zorlayabilir, aceleyle yazılan any türleri ise tip güvenliğini sessizce ortadan kaldırır. Küçük ve kısa ömürlü projelerde bu ek yük, sağladığı faydayı aşabilir. Ayrıca eski ve bakımı bırakılmış bazı paketlerin tür tanımları eksik olabilir; bunlar için tanımları elle yazmak gerekebilir.

05Hangi Projede TypeScript Seçilmeli?

Karar, projenin ömrüne, büyüklüğüne ve ekibine bağlıdır. Genel bir kural olarak, birden fazla kişinin uzun süre bakımını yapacağı her yazılım TypeScript'ten fayda görür.

Yönetim panelleri, rezervasyon motorları, stok ve sipariş akışları gibi çok sayıda veri modelinin birbirine bağlandığı sistemlerde tür tanımları adeta projenin haritasıdır. Özel yazılım çözümlerinde bu harita, yeni bir özelliğin eski bir ekranı bozup bozmadığını anında gösterir.

Pazaryeri, kargo ve muhasebe gibi dış sistemlerle konuşan projelerde de durum benzerdir. Her servisin döndürdüğü verinin şekli türlerle tanımlandığında, karşı taraftaki bir değişiklik çok daha erken fark edilir; bu da entegrasyon işlerinde sürprizleri azaltır.

Oda, tarih, fiyat ve misafir bilgisinin aynı anda birçok ekranda kullanıldığı bir otel yazılımı ya da ilan, filtre ve kullanıcı rollerinin iç içe geçtiği bir emlak ilan yazılımı bu tür projelere iyi örnektir. Bir alanın adı ya da türü değiştiğinde, derleyici o alanı kullanan bütün raporları, formları ve servisleri tek seferde listeler; ekip hiçbir köşeyi atlamadan değişikliği tamamlar.

• TypeScript mantıklı: çok ekranlı uygulamalar, paneller, uzun ömürlü ürünler, API ve entegrasyon katmanları.
• Zorunlu değil: tek sayfalık tanıtım siteleri, kısa kampanya sayfaları, birkaç satırlık otomasyon betikleri.

06TypeScript'e Geçişin Maliyeti

Var olan bir JavaScript projesini TypeScript'e taşımak tek seferde yapılması gereken bir iş değildir. Derleyici JavaScript ve TypeScript dosyalarını bir arada çalıştırabildiği için kademeli geçiş mümkündür.

Maliyeti belirleyen başlıca etkenler; kod tabanının büyüklüğü, mevcut testlerin varlığı, kullanılan kütüphanelerin tür desteği ve ekibin deneyimidir. Testleri olan bir projede geçiş çok daha güvenli ilerler; bu konuda yazılım testi nedir yazımız iyi bir tamamlayıcıdır.

1. Projeye derleyiciyi ve bir yapılandırma dosyasını ekleyin; başlangıçta gevşek kurallarla başlayın.
2. Yeni yazılan her dosyayı TypeScript ile yazın.
3. En çok kullanılan veri modelleri için tür tanımları çıkarın.
4. Kritik modülleri tek tek dönüştürün ve testlerini çalıştırın.
5. Kod tabanı hazır olduğunda strict modu açarak kuralları sıkılaştırın.

npm install --save-dev typescript
npx tsc --init
npx tsc --noEmit

07TypeScript Öğrenmek İçin İpuçları

TypeScript öğrenmek isteyenler için en iyi yöntem, bildiğiniz bir JavaScript projesine türleri yavaş yavaş eklemektir. Önce temel türler (string, number, boolean, dizi), ardından interface ve type tanımları, sonra union türler ve generic'ler gelir.

Arayüz geliştiriyorsanız TypeScript'i doğrudan React ile birlikte kullanmak da öğrenmeyi hızlandırır; bileşenlerin props'larını türlerle tanımlamak çok somut bir alıştırmadır. React tarafı için React nedir yazımıza bakabilirsiniz.

Resmî el kitabı ve deneme ortamı için typescriptlang.org adresi en güvenilir kaynaktır. Tarayıcıdaki deneme alanında yazdığınız kodun hangi JavaScript'e dönüştüğünü anında görebilirsiniz.