ProgramlamaFrontend geliştirici

İşlevsel JavaScript modüllerinin TypeScript'teki tip mekanizması nasıl çalışır? Eğer kaynak JS dosyası tipleri içermiyorsa, import nasıl tiplenir? Importta any kullanmanın incelikleri ve riskleri nelerdir?

Hintsage yapay zeka asistanı ile mülakatları geçin

Cevap.

Konunun geçmişi:

TypeScript, mevcut JS uygulamalarına statik tip eklemek için tasarlanmıştır. Şu soru ortaya çıkıyor: dışarıdan gelen veya kendi yazdığımız saf JavaScript ile yazılmış bir modül bağladığımızda import nasıl tiplenir, tip yoksa? Bu durumda TypeScript, .d.ts uzantılı beyan dosyalarını kullanır ya da tipleri otomatik olarak (bazen yanlış) çıkartır.

Sorun:

Eğer import sırasında TypeScript uygun bir tip tanımı bulmazsa, değişken any tipi alır, bu da tam bir tip güvenliği kaybı anlamına gelir. Bu, derleyicinin gözden kaçıracağı hatalara ve çalışma zamanında oluşacak hatalara yol açabilir. Geliştiriciler, genellikle import edilen fonksiyonlar/nesneler için tipleri açıkça belirtmeyi unuturlar.

Çözüm:

  1. Kendi JS modülleriniz için tip beyanlarını elle yazabilirsiniz (.d.ts dosyaları).
  2. Popüler kütüphaneler için genellikle @types/ paketleri mevcuttur.
  3. Import sırasında, gerekli nesnenin yapısını kendi başınıza tanımlayarak tipleri açıkça beyan edebilirsiniz.
  4. any kullanımından kaçınılması önerilir; eğer kaçınılmazsa, kullanım alanını mümkün olduğunca sınırlamak gerekir.

Kod örneği:

// 1. JS modülünün açıkça tiplenmesi import myFunc from './myLib'; declare function myFunc(x: number): boolean; // 2. myLib.d.ts dosyasında export function myFunc(x: number): boolean; tanımı olan bir JS modülünden import import { myFunc } from './myLib'; // 3. Tip olmadan modül import edilip tipi açıkça tanımlanıyor import * as legacy from './legacy'; const typedLegacy: { runTask: (name: string) => void } = legacy;

Anahtar özellikler:

  • Beyanlar yoksa, import edilen değer varsayılan olarak any tipini alır ve bu da tip güvenliğini ihlal eder.
  • En iyi yaklaşım, dış modüller veya kendi kütüphaneleriniz için .d.ts dosyaları oluşturmaktır.
  • Gerektiğinde, dış fonksiyonlar/modüller için declare/arayüzler aracılığıyla yerel tanımlamalar mümkündür.

Kandırmaca soruları.

TypeScript, beyan olmadan import edilen JS modülünün tiplerini otomatik olarak çıkartabilir mi?

Hayır, eğer dosya JavaScript ile yazıldıysa ve tip beyanları yoksa, TypeScript any varsaymak zorunda kalır ve tip bilgilerini kaybeder, yalnızca önemsiz durumlarda (export const x = 1;) geçerlidir.

Eğer JS modülünde yeni alanlar ortaya çıkarsa, import edilen tipleri "genişletebilir miyim"?

Yalnızca beyan dosyasını (.d.ts) güncelleyip güncelleyemezseniz. Eğer tipler .d.ts içinde sabitlenmişse, TypeScript bunları "gerçek" olarak kullanır, herhangi bir yeni alan tiplenmeden kalır ya da hata verebilir.

TypeScript projesine dış bir JS modülü import etmek güvenli midir, eğer @types/ ve beyan yoksa?

Hayır, bu güvenliği ciddi şekilde düşürür; import ile ilgili tüm işlemler untyped (any) olur, derleyici hata vermeyecek, modül mevcut olmasa ya da API değişse bile. Bu tür modüllerle çalışma yalnızca geçici bir çözüm olarak, açık tiplenme veya kodun izole edilmesi ile mümkündür.

Tip hataları ve antipatternler

  • Dış paketler için beyan (.d.ts) unutma
  • JS modüllerini import ederken implicit any'e körü körüne güvenme
  • Type-safe kodun sınırlarını ihlal etme

Günlük hayattan bir örnek

Olumsuz durum

Geliştirici, beyanlar olmadan dış bir JS kütüphanesini import eder, API'yi güvenle kullanır ve any tipi alır. Kütüphane güncellendiğinde, yöntemlerin imzası değişiyor ama hata oluşmuyor, sadece çalışma zamanında hatalar ortaya çıkıyor.

Artıları:

  • Herhangi bir JS modülünü hızlı ve kolay bir şekilde bağlama

Eksileri:

  • Tip güvenliği garantisi yok, hatalar çalıştırılana kadar yakalanamıyor

Olumlu durum

Bir beyan dosyası .d.ts oluşturuluyor veya bir @types/ paketi ekleniyor, API tanımı tam olarak kaynak JS modülüne karşılık geliyor. Tüm import edilen yöntemler tipleniyor, IDE otomatik tamamlama öneriyor, herhangi bir uyumsuzluk derleme hatası gösteriyor.

Artıları:

  • Tip güvenliği, hataların çalıştırmadan önce uyarılması
  • Kod içinde otomatik tamamlama desteği ve dokümantasyon

Eksileri:

  • .d.ts dosyalarının yazılması ve JS modülündeki güncellemelerle tiplerin desteklenmesi için zaman gerektirir.