ProgramlamaFrontend Geliştirici / Fullstack Geliştirici

TypeScript'teki modül sistemleri nasıl çalışır ve bunu JavaScript modüllerinden ayıran nedir? TypeScript'teki tür beyanları ve ihracatın özellikleri nelerdir?

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

Cevap

TypeScript, JavaScript'in iki temel modül sistemini destekler - CommonJS ve ES Modülleri, kodu düzenlemek için import ve export anahtar kelimelerini kullanma olanağı sağlar. TypeScript'in farkı, değerler gibi dışa aktarılabilen ve içe aktarılabilen tür beyanlarının bulunmasıdır.

Örneğin, bir arayüz dışa aktarabilirsiniz:

// types.ts export interface User { id: number; name: string; } // index.ts import { User } from './types'; const u: User = { id: 1, name: 'Alice' };

Ayrıca export type, export interface, import type gibi yapılar desteklenir, bu da sadece türleri içe aktarmaya ve nihai paket içinde kod çekmeyi önlemeye olanak tanır, bu da derlemeyi optimize eder:

import type { User } from './types';

Önemli bir özellik: TypeScript'te dışa aktarılabilen türler, nihai JavaScript'e geçmeyecek olanlardır.

Kandırmaca Sorusu

import { SomeType } from './file' ile import type { SomeType } from './file' arasındaki fark nedir?

Yanlış Cevap: Aynı şeyi yaparlar.

Doğru Cevap: import { SomeType } ... tüm modülün içe aktarılmasına ve sonuçta elde edilen JavaScript'e dahil edilmesine neden olabilir; bu sadece tür olsa bile. import type { SomeType } ..., sadece türün içe aktarılmasını garanti eder - derleme aşamasında, ve çıktıda yan etkiler veya kod olmayacaktır.

Bilgi Eksikliğinin Gerçek Hatalara Yol Açtığına Dair Örnekler


Hikaye

Büyük bir projede, ekip, yan etkileri olan bir modülden (örneğin, require/import ile kod çalıştıran) import { SomeType } ... ile türleri içe aktardı. Sonuç olarak, üretim derlemesine gereksiz bağımlılıklar ve yan etkiler dahil edildi, hatalara neden oldu ve paket boyutunu artırdı.


Hikaye

Bir geliştirici, bir türü global bir değişken aracılığıyla tanımlamaya karar verdi, ancak tür ve değer için aynı adı içeren bir dışa aktarma yaptı. Bu, bazı dosyalarda ad çakışmasına neden oldu ve TypeScript güncellemesinden sonra derleme başarısız oldu.


Hikaye

Ekip, export/import type özelliklerini ayırt edemedi ve türleri verilerle birlikte dışa aktardı. Sonuç olarak, ağaç sarsımı aracı ölü kodu hariç tutamadı ve paketi artırdı.