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.
import { SomeType } from './file'ileimport 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.
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ı.