Odpowiedź

TypeScript wspiera obie główne systemy modułów JavaScript — CommonJS i ES Modules, pozwalając na używanie słów kluczowych import i export do organizacji kodu. Różnica w TypeScript polega na obecności deklaracji typów, które mogą być eksportowane i importowane tak samo jak wartości.

Na przykład, można eksportować interfejs:

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

Wspierane są również export type, export interface, import type, co pozwala na importowanie tylko typów bez wciągania kodu do końcowego pakietu, co optymalizuje budowę:

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

Ważna cecha: w TypeScript można eksportować tylko typy, które nie trafią do końcowego JavaScript.

Pytanie podchwytliwe

Jaka jest różnica między import { SomeType } from './file' a import type { SomeType } from './file'?

Błędna odpowiedź: Działają tak samo.

Prawidłowa odpowiedź: import { SomeType } ... może spowodować, że cały moduł zostanie zaimportowany i włączony do wyniku JavaScript, nawet jeśli jest to tylko typ. import type { SomeType } ... gwarantuje, że importowany jest tylko typ — na etapie kompilacji, a żadne efekty uboczne ani kod w wyjściu nie będą występować.

Przykłady rzeczywistych błędów z powodu nieznajomości subtelności tematu

---

Historia

W dużym projekcie zespół importował typy przez zwykły import import { SomeType } ... z modułu z efektami ubocznymi (na przykład uruchamiającego kod przy require/import). W rezultacie do produkcyjnej wersji były dołączane zbędne zależności i efekty uboczne, powodując błędy i zwiększając rozmiar pakietu.

---

Historia

Programista postanowił opisać globalny typ przez globalną zmienną, a nie przez deklarację typu i przypadkowo zrobił eksport typu i wartości o identycznych nazwach. Spowodowało to konflikt nazw w kilku plikach i niepowodzenie budowy po aktualizacji TypeScript.

---

Historia

Zespół nie odróżnił cech export/import type i eksportował typy razem z danymi. W rezultacie narzędzie do tree-shaking nie mogło wykluczyć martwego kodu, zwiększając pakiet.