Modules en TypeScript
Cet article explique les modules en TypeScript.
YouTube Video
Modules en TypeScript
Les modules en TypeScript sont une fonctionnalité importante pour améliorer la réutilisabilité et la maintenabilité du code. Comme JavaScript, TypeScript est également basé sur le système de modules ECMAScript 2015 (ES6), mais une caractéristique clé est la possibilité d'utiliser le système de type de TypeScript.
Que sont les modules ?
Un module est un système qui regroupe du code connexe en une seule unité pouvant être importée et réutilisée dans d'autres fichiers. En TypeScript, un scope est créé par fichier pour encapsuler le code, empêchant ainsi d'affecter les autres fichiers. Cela aide à éviter les collisions de code et rend la maintenance plus facile.
Modules internes et externes
- Modules internes (Espaces de noms) : Une méthode de définition de module utilisée dans TypeScript 1.5 et antérieur, désormais déconseillée. Il est désormais traité comme un 'espace de noms'.
- Modules externes : Le standard actuel, basé sur le système de modules ES6. Cette section explique principalement les modules externes.
Comment exporter des modules
Lors de la création de modules, l'exportation est nécessaire pour permettre l'accès depuis l'extérieur. En TypeScript, vous pouvez exporter des valeurs, des fonctions, des classes, etc. en utilisant le mot-clé export. Il existe principalement deux types d'exportations.
Exportations nommées
Utilisé pour effectuer plusieurs exportations, permettant au côté importateur de sélectionner et d'utiliser des éléments spécifiques.
1// mathUtils.ts
2export const pi: number = 3.14159;
3
4export function add(x: number, y: number): number {
5 return x + y;
6}
7
8export function subtract(x: number, y: number): number {
9 return x - y;
10}Exportations par défaut
Utilisé lorsque vous souhaitez que le module entier ait une seule exportation par défaut. Les exportations par défaut sont exportées sans nom, permettant au côté importateur de les recevoir avec n'importe quel nom.
1// calculator.ts
2export default class Calculator {
3 add(x: number, y: number): number {
4 return x + y;
5 }
6
7 subtract(x: number, y: number): number {
8 return x - y;
9 }
10}Comment importer des modules
Pour utiliser des modules, vous importez des valeurs, fonctions, classes, etc. depuis le module à l'aide du mot-clé import.
Importations nommées
Lors de l'importation d'éléments spécifiques depuis une exportation nommée, utilisez des accolades {}.
1// main.ts
2import { pi, add, subtract } from './mathUtils';
3
4console.log(`Value of pi: ${pi}`);
5console.log(`Addition: ${add(10, 5)}`);
6console.log(`Subtraction: ${subtract(10, 5)}`);Importations par défaut
Lors de l'importation d'une exportation par défaut, vous pouvez lui attribuer n'importe quel nom.
1// main.ts
2import Calculator from './calculator';
3
4const calculator = new Calculator();
5console.log(`Addition: ${calculator.add(10, 5)}`);
6console.log(`Subtraction: ${calculator.subtract(10, 5)}`);Alias d'importation
Pour éviter les collisions de noms ou raccourcir des noms longs, vous pouvez importer avec un alias.
1// main.ts
2import { add as addition, subtract as subtraction } from './mathUtils';
3
4console.log(`Addition: ${addition(10, 5)}`);
5console.log(`Subtraction: ${subtraction(10, 5)}`);Différence entre modules et espaces de noms
Un espace de noms (namespace) est une structure de module interne utilisée dans les premiers temps de TypeScript pour regrouper du code. Cependant, les modules ES6 sont maintenant recommandés, et les espaces de noms sont rarement nécessaires.
Les espaces de noms peuvent être définis dans le même fichier ou sur plusieurs fichiers, et comme ils peuvent être étendus globalement, gérer les dépendances peut devenir difficile. En revanche, les modules ont des portées séparées par fichier et des dépendances claires, ce qui en fait une méthode plus moderne et sécurisée.
1// Example of a namespace
2namespace Geometry {
3 export function calculateArea(radius: number): number {
4 return Math.PI * radius * radius;
5 }
6}
7
8// Can be used directly without importing the module (not recommended)
9const area: number = Geometry.calculateArea(5);
10console.log(`Area: ${area}`);Résolution de module TypeScript
En TypeScript, il existe deux stratégies pour la résolution des modules.
- Résolution des modules Node : La méthode standard de résolution utilisée dans les environnements Node.js qui résout les modules en les recherchant dans le dossier
node_modules. - Résolution des modules classique : La méthode de résolution propre à TypeScript qui effectue une recherche plus flexible, mais qui n'est plus couramment utilisée de nos jours.
Généralement, la résolution des modules Node est utilisée et est activée par défaut, sauf indication contraire dans le fichier de configuration.
Exemple pratique
Enfin, un exemple est présenté pour implémenter et réutiliser des fonctions computationnelles à l'aide de modules.
mathUtils.ts
1export const pi: number = 3.14159;
2
3export function multiply(x: number, y: number): number {
4 return x * y;
5}
6
7export function divide(x: number, y: number): number {
8 if (y === 0) {
9 throw new Error("Cannot divide by zero");
10 }
11 return x / y;
12}calculator.ts
1import { multiply, divide } from './mathUtils';
2
3export default class Calculator {
4 multiplyNumbers(x: number, y: number): number {
5 return multiply(x, y);
6 }
7
8 divideNumbers(x: number, y: number): number {
9 return divide(x, y);
10 }
11}main.ts
1import Calculator from './calculator';
2
3const calculator = new Calculator();
4
5const result1: number = calculator.multiplyNumbers(10, 5);
6console.log(`Multiplication: ${result1}`);
7
8const result2: number = calculator.divideNumbers(10, 2);
9console.log(`Division: ${result2}`);Résumé
Le système de modules TypeScript est un outil puissant pour organiser le code, améliorer la réutilisabilité et augmenter la maintenabilité. L'utilisation de modules externes basés sur les modules ES6 est recommandée, et l'utilisation des mots-clés export et import permet une exportation et une importation faciles des modules.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.