TypeScript modül genişletme ve iç içe geçmiş JavaScript dosyalarını yönetme

TypeScript, JavaScript ekosistemine son on yıldır değerli bir katkı sunmuş ve JavaScript kodu için tür güvenliği sağlama kabiliyeti sayesinde popülerlik kazanmıştır.

JavaScript paketleri için türler#

Geriye dönük uyumluluk ve esneklik için, TypeScript, paket yazarlarının JavaScript paketleri için tür tanımları sağlamasına olanak tanır. Bu tür tanımları genellikle "DefinitelyTyped" deposunda saklanır. Bu tür tanımlarını @types kapsamını kullanarak kurabilirsiniz, örneğin, @types/react, React paketi için bir tür tanımıdır.

Bu tür tanımlarını kurduktan sonra, paketi tür güvenliği konusunda rahatça kullanabilirsiniz. İşte tür güvenliği sağlayarak bir React bileşeni tanımlamanın bir örneği:

Modül genişletme#

Çoğu popüler JavaScript paketi için @types kapsamında hazır tür tanımları bulunurken, bazı paketler tür tanımlarından yoksun olabilir veya güncel olmayan tür tanımlarına sahip olabilir. Böyle durumlarda, TypeScript "modül genişletme" adlı güçlü bir özellik sunar. Bu özellik, bu paketlere tür tanımları eklemenizi sağlar. Gelin bir örneğe bakalım:

Artık bu genişletilmiş tür tanımını kodunuzda kullanabilirsiniz:

Modül genişletme, sadece paketler için tür tanımları eklemenizi sağlamakla kalmaz, aynı zamanda mevcut tür tanımlarını da genişletmenizi sağlar. Örneğin, window nesnesine yeni bir özellik ekleyebilirsiniz:

Ve bu özelliği kodunuzda kullanabilirsiniz:

Önceki bir yazımızda, React Router kütüphanesinde karşılaşılan bir tür sorunundan bahsetmiştik ve buna karşı gelen türü genişletip özel bir açıklama dosyası ile mevcut türü genişleterek ve augment ederek sorunu aşmak zorunda kaldık.

Modül genişletmeyi kullanırken, tür tanımlarınızın doğruluğunu sağlamak için JavaScript kaynak kodunu dikkatlice incelemek çok önemlidir. Yanlış tür tanımları çalışma zamanı hatalarına yol açabilir. Yukarıdaki örnekte, window.foo özelliği, window nesnesi üzerinde mevcut olan bir string olmalıdır.

Küresel genişletme#

Bazen, küresel değişkenler tanıtan komut dosyaları ile karşılaşabilirsiniz ve bu küresel değişkenler için tür tanımları sağlamak isteyebilirsiniz. Örneğin, küresel bir değişken olan __DEV__'yi ayarlayan bir komut dosyanız varsa:

Bu küresel değişken için tür tanımları şöyle ekleyebilirsiniz:

Artık bu değişkeni TypeScript kodunuzda kullanabilirsiniz:

Modül genişletme ve küresel genişletmeyi birleştirerek JavaScript prototipleri için tür tanımlarını dahi genişletebilirsiniz. Ancak, bu genellikle önerilmez çünkü küresel alanı kirletebilir.

Modül genişletmenin gücü, bu tür genişletmelere olanak tanır, ancak küresel alanın kirlenmesini önlemek için dikkatli olun.

İç içe JavaScript dosyaları#

Önceki örneklerde, paketlerin giriş dosyası aracılığıyla ithalatların çözümlenebileceğini varsaydık. Ancak, bazı paketler, karşılık gelen tür tanımları olmadan iç içe JavaScript dosyalarını dışa aktarabilir. Şu yapıya sahip foo adında bir paket düşünün:

foo paketi, giriş noktası olarak index.js dosyasını dışa aktarır ve ayrıca bar dizinini de dışa aktarır.

foo paketi için tür tanımlamalarını genişletmek için bir foo.d.ts dosyası oluşturabilirsiniz:

Ancak, TypeScript'te baz.js dosyasını ithal etmeyi denerseniz, bir hata ile karşılaşırsınız:

baz.js dosyası için tür tanımlarını genişletmek üzere, ayrı bir baz.d.ts dosyası oluşturmanız gerekir:

Bu, TypeScript'in modülü ve ilgili tür bildirimlerini bulabilmesini sağlar:

Tür tanımlarını düzenli tutmak için, tür tanımı dosyalarınızda paketin yapısını taklit edebilirsiniz:

Bu yaklaşım, iç içe JavaScript dosyalarıyla bile TypeScript kodunuzu yapılandırılmış ve tür açısından güvenli tutar.