Antwort

TypeScript unterstützt beide Hauptmodulsysteme von JavaScript — CommonJS und ES Modules, und ermöglicht die Verwendung der Schlüsselwörter import und export, um den Code zu organisieren. Der Unterschied zu TypeScript liegt in den Typdeklarationen, die exportiert und importiert werden können, genau wie Werte.

Beispielsweise kann ein Interface exportiert werden:

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

Es werden auch export type, export interface, import type unterstützt, was es ermöglicht, nur Typen zu importieren, ohne dass der Code in das endgültige Bundle gezogen wird, was den Build optimiert:

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

Eine wichtige Besonderheit: In TypeScript können nur Typen exportiert werden, die nicht in das endgültige JavaScript gelangen.

Fangfrage

Was ist der Unterschied zwischen import { SomeType } from './file' und import type { SomeType } from './file'?

Falsche Antwort: Sie tun dasselbe.

Richtige Antwort: import { SomeType } ... kann dazu führen, dass das gesamte Modul importiert und in das resultierende JavaScript aufgenommen wird, selbst wenn es sich nur um einen Typ handelt. import type { SomeType } ... stellt sicher, dass nur der Typ importiert wird — zur Kompilierungszeit, sodass es keine Nebenwirkungen oder Code im Output gibt.

Beispiele für reale Fehler aufgrund von Unkenntnis der Feinheiten des Themas

---

Geschichte

In einem großen Projekt importierte das Team Typen über einen normalen Import import { SomeType } ... aus einem Modul mit Nebenwirkungen (z. B. Code, der bei require/import ausgeführt wird). Infolgedessen wurden unnötige Abhängigkeiten und Nebenwirkungen in die Produktionsbuilds gezogen, was zu Bugs führte und die Bundle-Größe erhöhte.

---

Geschichte

Der Entwickler entschied sich, einen globalen Typ über eine globale Variable zu beschreiben, anstatt über eine Typdeklaration, und exportierte versehentlich Typ und Wert mit denselben Namen. Dies führte zu Namenskonflikten in mehreren Dateien und einer Build-Pleite nach dem Update von TypeScript.

---

Geschichte

Das Team konnte die Besonderheiten von export/import type nicht unterscheiden und exportierte Typen zusammen mit Daten. Infolgedessen konnte das Tool für Tree-Shaking den toten Code nicht ausschließen, was die Bundle-Größe erhöhte.