Antwoord

TypeScript ondersteunt beide belangrijkste modulesystemen van JavaScript — CommonJS en ES Modules, en stelt je in staat om de sleutelwoorden import en export te gebruiken om de code te organiseren. Het onderscheid van TypeScript is de aanwezigheid van type-declaraties, die op dezelfde manier kunnen worden geëxporteerd en geïmporteerd als waarden.

Bijvoorbeeld, je kunt een interface exporteren:

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

Daarnaast worden export type, export interface, import type ondersteund, wat mogelijk maakt om alleen types te importeren zonder dat de code in de uiteindelijke bundel wordt meegenomen, wat de build optimaliseert:

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

Een belangrijke eigenschap: in TypeScript kun je alleen types exporteren die niet in het uiteindelijke JavaScript terechtkomen.

Vragend met een valstrik

Wat is het verschil tussen import { SomeType } from './file' en import type { SomeType } from './file'?

Verkeerd antwoord: Ze doen hetzelfde.

Juist antwoord: import { SomeType } ... kan ertoe leiden dat de hele module wordt geïmporteerd en opgenomen in het resulterende JavaScript, zelfs als het alleen maar een type is. import type { SomeType } ... garandeert dat alleen het type wordt geïmporteerd — op het moment van compilatie, en er zijn geen neveneffecten of code in de output.

Voorbeelden van echte fouten door onbekendheid met de nuances van het onderwerp

---

Verhaal

In een groot project importeerde het team types via een reguliere import import { SomeType } ... uit een module met neveneffecten (bijvoorbeeld die code uitvoert bij require/import). Hierdoor werden onnodige afhankelijkheden en neveneffecten meegenomen in de productie-build, wat bugs veroorzaakte en de bundelgrootte vergrootte.

---

Verhaal

Een ontwikkelaar besloot een globale type te beschrijven via een globale variabele, en niet via een type-declaratie, en maakte per ongeluk een export van type en waarde met dezelfde namen. Dit veroorzaakte naamconflicten in verschillende bestanden en faalde de build na een update van TypeScript.

---

Verhaal

Het team onderscheidde de eigenschappen van export/import type niet en exporteerde types samen met gegevens. Hierdoor kon de tool voor tree-shaking de dode code niet uitsluiten, wat de bundel vergrootte.