Réponse

TypeScript prend en charge les deux principaux systèmes de modules JavaScript — CommonJS et ES Modules, permettant d'utiliser les mots-clés import et export pour organiser le code. La distinction de TypeScript réside dans la présence de déclarations de types qui peuvent être exportées et importées de la même manière que les valeurs.

Par exemple, on peut exporter une interface :

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

On prend également en charge export type, export interface, import type, ce qui permet d'importer uniquement des types sans inclure de code dans le bundle final, optimisant ainsi la compilation :

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

Une caractéristique importante : en TypeScript, il n'est possible d'exporter que des types qui ne figureront pas dans le JavaScript final.

Question piégeuse

Quelle est la différence entre import { SomeType } from './file' et import type { SomeType } from './file' ?

Réponse incorrecte : Ils font la même chose.

Réponse correcte : import { SomeType } ... peut entraîner l'importation de tout le module et son inclusion dans le JavaScript résultant, même si c'est juste un type. import type { SomeType } ... garantit que seul le type est importé — à l'étape de la compilation, sans effets secondaires ou code dans la sortie.

Exemples d'erreurs réelles dues à l'ignorance des subtilités du sujet

---

Histoire

Dans un grand projet, l'équipe importait des types via un import standard import { SomeType } ... depuis un module avec des effets secondaires (par exemple, exécutant du code lors de require/import). En conséquence, des dépendances et des effets secondaires indésirables étaient inclus dans la compilation de production, causant des bogues et augmentant la taille du bundle.

---

Histoire

Un développeur a décidé de décrire un type global via une variable globale, plutôt qu'au travers d'une déclaration de type, et a accidentellement créé une exportation de type et de valeur avec des noms identiques. Cela a provoqué des conflits de noms dans plusieurs fichiers et a échoué la compilation après la mise à jour de TypeScript.

---

Histoire

L'équipe ne distinguait pas les spécificités de l'export/import type et a exporté les types avec les données. En conséquence, l'outil de tree-shaking n'a pas pu exclure le code mort, augmentant le bundle.