export default vs export : que choisir en TypeScript ?

TypeScript export vs default export : on éclaircit une fois pour toutes

Salut, l'ami ! Si tu débutes tout juste avec TypeScript (ou si tu n'es plus un débutant mais que tu te mélanges encore les pinceaux avec les exports), cet article est ta bouée de sauvetage. Le sujet "TypeScript export vs default export" est l'un des plus brûlants sur Stack Overflow, et pour cause. Ça semble être un détail, mais que de polémiques ! Mettons les choses au clair une bonne fois pour toutes, et retenons à jamais quand utiliser export et quand utiliser export default.

Nous n'allons pas énumérer les règles de manière sèche. Nous allons décortiquer des exemples concrets, les erreurs typiques des débutants et donner des recommandations précises. C'est parti !

Qu'est-ce que l'export en TypeScript et à quoi ça sert ?

Imagine que tu écris un gros programme. Tu ne vas pas mettre tout le code dans un seul fichier, n'est-ce pas ? Bien sûr que non. Tu le divises en modules : un fichier gère les utilisateurs, un autre les calculs, un troisième l'interface. L'export est la façon de dire à TypeScript : "Hé, cette fonction, cette classe ou cette variable peut être utilisée dans d'autres fichiers". Et l'import est la façon de dire : "Donne-moi donc cette chose provenant d'un autre fichier".

En TypeScript, il existe deux principaux types d'export : l'export nommé (named export) et l'export par défaut (default export). Et c'est là que les choses deviennent intéressantes.

Export nommé (named export) — précision et ordre

L'export nommé, c'est quand tu indiques explicitement le nom de ce que tu exportes. C'est comme si tu mettais sur chaque boîte dans ton garage une étiquette bien visible : "Outils", "Équipement sportif", "Vieux manuels".

La syntaxe est très simple. Ajoute simplement le mot-clé export avant la déclaration :

Exemple d'export nommé

// utils.ts\nexport const PI = 3.14159;\n\nexport function calculateArea(radius: number): number {\n  return PI * radius * radius;\n}\n\nexport class Circle {\n  constructor(public radius: number) {}\n}

Et maintenant, importons cela dans un autre fichier :

// app.ts\nimport { PI, calculateArea, Circle } from './utils';\n\nconsole.log(PI); // 3.14159\nconst area = calculateArea(5);\nconst myCircle = new Circle(10);

Remarque les accolades { } lors de l'import. Elles sont le signe distinctif de l'export nommé. Tu peux importer uniquement ce dont tu as besoin, et tu es obligé d'utiliser les mêmes noms que ceux spécifiés lors de l'export (ou alors les renommer avec as, mais nous verrons cela plus tard).

Avantages de l'export nommé

\n
• Clarté : Tu vois toujours exactement ce qui est exporté depuis le module.
\n
• Auto-complétion : L'IDE (par exemple, VS Code) suggère très bien les noms lors de l'import.
\n
• Refactorisation : Si tu renommes une fonction exportée, l'IDE la renomme dans tous les endroits où elle est importée. C'est sûr.
\n
• Tree-shaking : Les bundlers (Webpack, Vite) peuvent "secouer" le code inutilisé, réduisant ainsi la taille du bundle final.
\n

Export par défaut (default export) — confort et concision

L'export par défaut, c'est quand tu dis : "Dans ce fichier, il y a une entité principale, et je veux qu'elle soit facile à importer". C'est comme si tu disais : "Voici ma carte de visite, tout l'essentiel est dessus".

Chaque module peut avoir un seul export par défaut. La syntaxe :

Exemple d'export par défaut

// logger.ts\nconst log = (message: string): void => {\n  console.log(`[LOG]: ${message}`);\n};\n\nexport default log;

Ou on peut le déclarer directement :

export default function log(message: string): void {\n  console.log(`[LOG]: ${message}`);\n}

L'import ressemble à ceci (sans les accolades !) :

// main.ts\nimport myLog from '