TypeScript Nedir? Teknik Olmayanlar İçin Sade Bir Rehber

TypeScript, tiplerle donatılmış JavaScript'tir. Her değerin ne tür veri olması gerektiğini — bir sayı, metin, bir sipariş listesi — belirten etiketler eklersiniz ve TypeScript kodunuzu çalışmadan önce uyuşmazlıklara karşı kontrol eder. TypeScript sitesi bunu “tipler için söz dizimi içeren JavaScript” olarak tanımlar; tipler, kod sıradan JavaScript'e dönüştürülürken çıkarılır ve bu JavaScript, JavaScript'in çalıştığı her yerde çalışır.

Yapay zekayla geliştirirken neden önemli

Yapay zeka modelleri kodu hızlı yazar, ama hızlı kodda hatalar olur: bir dosyada customerName, başka bir dosyada customer_name alanı; fiyatın sayı yerine metin olarak geçmesi; eksik bir değerle çağrılan bir fonksiyon. Düz JavaScript'te bu hatalardan birçoğu, biri yanlış düğmeye tıklayana kadar ortaya çıkmaz.

TypeScript bunların birçoğunu, kod yazılırken daha erken yakalar:

• Yapay zeka anında geri bildirim alır. Tip hataları, yanlış olan satırı tam olarak gösterir; böylece agent siz görmeden düzeltebilir.
• Değişiklikler daha güvenlidir. Bir alanı yeniden adlandırdığınızda TypeScript, eski adı kullanan her yeri işaretler.
• Kod kendini açıklar. Tipler, bir fonksiyonun neyi beklediğini ve neyi döndürdüğünü belgeler; bu, sizin, yapay zekanın ve daha sonra üzerinde çalışacak her geliştiricinin işine yarar.
• Editörler daha akıllı olur. Otomatik tamamlama ve “tanıma git” daha iyi çalışır; çünkü editör her değerin ne olduğunu bilir.

Birçok yapay zeka uygulama oluşturucunun TypeScript'i varsayılan olarak seçmesinin büyük nedeni budur.

Günlük bir benzetme

Etiketli bölmeleri olan bir depoyu düşünün. Her bölmenin bir tabelası vardır: “Sadece paletler”, “Soğuk zincir”, “En fazla 500 kg”. Bir teslimat geldiğinde kapıdaki kontrolör malları tabelayla karşılaştırır. Dondurulmuş balığın kuru gıda bölmesine gitmeye çalıştığı, bir hafta sonra kokudan anlaşılmak yerine kapıda durdurulur.

TypeScript, kapıdaki kontrolördür. Tipler tabelalardır. Kontrol, kodunuz kullanıma girmeden önce yapılır. Ve her şey yerine oturduktan sonra tabelalar indirilir: çalışan JavaScript'in içinde artık hiç tip kalmaz.

TypeScript nasıl çalışır

1. Siz (ya da yapay zeka) .ts veya .tsx dosyaları yazarsınız — tip etiketleri içeren TypeScript.
2. Tip denetleyicisi kodu okur ve uyuşmazlıkları editörde ya da derlemede hata olarak bildirir.
3. Bir derleme adımı tipleri kaldırır, düz JavaScript üretir.
4. JavaScript tarayıcıda ya da sunucuda (Node.js, Deno, Bun) çalışır.

Önemli bir sonucu var: TypeScript, yazdığınız kodu kontrol eder; uygulama çalışırken gelen veriyi kontrol etmez. Dış bir API beklenmedik bir şey döndürürse, çalışma zamanı doğrulaması eklemediğiniz sürece TypeScript bunu göremez.

Çalışılmış bir örnek: bir rezervasyon formu

Diyelim ki bir kuaför salonu için rezervasyon uygulaması yapıyorsunuz. Bir rezervasyonu tanımlayan bir tip:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // ? işareti, alanın isteğe bağlı olduğu anlamına gelir
};

Ve bir kapora tutarını hesaplayan bir fonksiyon:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Şimdi TypeScript'in neyi yakaladığına bakın.

Yanlış yazılmış bir alan.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript, prise adının bilinen bir özellik olmadığını ve price'ın eksik olduğunu bildirir. Düz JavaScript'te bu, sessizce NaN (sayı değil) olan bir kapora hesaplardı.

Yanlış türde bir değer.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript, sayının beklendiği yerde bir metin kullanılamayacağını bildirir. Onsuz, "40" * 0.2 çalışır, ama "40" + 5 sonucu "405" verir — bir faturada ortaya çıkan türden bir hata.

Var olmayan bir hizmet.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript, "perm"in izin verilen hizmetlerden biri olmadığını bildirir. Salon daha sonra perm eklediğinde, bunu tipe eklersiniz ve TypeScript güncellenmesi gereken her yeri gösterir: fiyat listesi, form, takvim renkleri.

Neyi yakalayamaz? Rezervasyon formu tarayıcıdan sunucuya price: "40" gönderirse, sunucudaki TypeScript bunu çalışma zamanında görmez. Bu yüzden iyi yapılmış uygulamalar gelen veriyi de doğrular; genellikle şekli kontrol edip onu uygun bir Booking'e dönüştüren bir doğrulama kütüphanesiyle.

TypeScript ve JavaScript karşılaştırması

Sık kullanılan terimler

Sık yapılan hatalar ve yanlış anlamalar

• “TypeScript kodu hatasız yapar.” Veri şeklindeki uyuşmazlıkları yakalar, yanlış mantığı değil. Yüzde 20 yerine yüzde 2 kapora hesaplayan bir kod tip kontrolünden geçer.
• “Tipler beni hatalı girdiden korur.” Tipler çalışma zamanında kaybolur. Kullanıcılardan, formlardan ve API'lerden gelen veriyi doğrulayın.
• Her yerde any. Bir yapay zeka sıkıştığında hataları susturmak için any ya da // @ts-ignore kullanabilir. Bu, sorunları çözmek yerine saklar.
• Önizleme çalıştığı için tip hatalarını görmezden gelmek. Bazı araçlar tip hatası olan kodu yine de çalıştırır. Bu hatalar hâlâ ileride çıkacak birer hatadır.
• “TypeScript daha yavaştır.” Tipler çalıştırmadan önce kaldırılır; çalışan JavaScript temelde aynıdır.
• “Yalnızca büyük ekipler içindir.” Yalnız çalışan geliştiriciler de faydalanır; özellikle düzenlemelerin çoğunu bir yapay zeka yaptığında.

Yapay zeka oluşturucunuzdan ne istemelisiniz

• “TypeScript'i strict modda kullan.”
• “Ana kayıtlarımız için — Customer, Booking, Invoice — ortak tipler tanımla ve bunları hem ön yüzde hem arka yüzde kullan.”
• “Hataları geçmek için any ya da @ts-ignore kullanma; asıl sorunu düzelt ve neydi, söyle.”
• “Gelen tüm veriyi yalnızca tiplerle değil, sunucuda da doğrula.”
• “Bitti demeden önce tip denetleyicisini çalıştır ve her hatayı düzelt.”
• “Bir alanı yeniden adlandırdığında, TypeScript'in işaretlediği her yeri güncelle.”
• “Bu tip hatasını sade bir dille açıkla.”

Yapay zekanın ürettiği kodu kontrol etme hakkında daha fazlası için yapay zeka tarafından üretilen kod nasıl incelenir ve yapay zekayla oluşturulan bir uygulamadaki hatalar nasıl ayıklanır rehberlerine bakın.

Mythex'te TypeScript

Belirli bir şey istemezseniz Mythex yeni projeleri Vite + React + TypeScript + Tailwind ile başlatır. Kod düzenleyici dil zekâsı içerir — TypeScript ve JavaScript için tamamlamalar, tanılamalar ve tanıma git gibi diğer dillerin yanında — böylece tip hataları yalnızca önizlemede değil, kodun içinde görünür. Düzenleyici Free'de salt okunurdur, Pro'da tamamen düzenlenebilir. İlk isteminizde farklı bir kurulum da isteyebilirsiniz; teknolojinin nasıl seçildiğini anlatan dokümantasyon sayfası bunu açıklar ve kod düzenleyici dokümantasyonu editörün neleri gösterdiğini anlatır.

Sorular