Comment créer et utiliser des modules TypeScript

Les modules TypeScript offrent une approche structurée pour organiser et gérer le code. Les modules permettent l'encapsulation du code dans des fichiers séparés, ce qui améliore la maintenabilité, la réutilisabilité et la testabilité. Ce guide explique le processus de création et d'utilisation des modules TypeScript.

Que sont les modules TypeScript ?

Les modules TypeScript sont des fichiers individuels qui exportent et importent des éléments de code tels que des classes, des fonctions et des variables. En utilisant des modules, le code peut être divisé en parties gérables, facilitant ainsi un meilleur contrôle des interactions entre les différentes parties du code.

Création d'un module TypeScript

Pour créer un module TypeScript, les étapes suivantes doivent être suivies:

  1. Créez un fichier TypeScript: Commencez par créer un nouveau fichier `.ts` pour le module, tel que `mathUtils.ts`.
  2. Définir et exporter le code: Implémentez des fonctions, des classes ou des variables dans ce fichier et utilisez le mot-clé export pour les rendre disponibles pour d'autres modules.

Exemple d'un module simple:

// mathUtils.ts

export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

Dans cet exemple, les fonctions « add » et « subtract » sont définies et exportées depuis le module « mathUtils.ts ».

Importer et utiliser un module TypeScript

Pour utiliser le code d'un module TypeScript dans un autre fichier, il faut l'importer. Cela implique:

  1. Créez un nouveau fichier TypeScript: Générez un fichier dans lequel le code du module sera utilisé, tel que `app.ts`.
  2. Importez le module: Utilisez le mot-clé import pour importer des fonctions, des classes ou des variables du module.

Exemple d'importation et d'utilisation des fonctions « add » et « subtract »:

// app.ts

import { add, subtract } from './mathUtils';

const sum = add(5, 3);
const difference = subtract(5, 3);

console.log(`Sum: ${sum}`);
console.log(`Difference: ${difference}`);

Dans cet exemple, les fonctions « add » et « subtract » sont importées depuis le module « mathUtils » et utilisées dans le fichier « app.ts ».

Exportations par défaut et nommées

Les modules TypeScript prennent en charge les exportations par défaut et nommées. Voici un bref aperçu:

  • Exportations par défaut: Une valeur unique peut être exportée comme exportation par défaut à partir d'un module à l'aide de export default.
  • Exportations nommées: Plusieurs valeurs peuvent être exportées à partir d'un module à l'aide d'exportations nommées avec le mot-clé export.

Exemple illustrant les deux types d’exportations:

// shapes.ts

export default class Circle {
  constructor(public radius: number) {}
  
  area(): number {
    return Math.PI * this.radius ** 2;
  }
}

export function getCircleInfo(radius: number): string {
  const circle = new Circle(radius);
  return `A circle with radius ${radius} has an area of ${circle.area()}`;
}

Dans cet exemple, « Circle » est exporté comme exportation par défaut, tandis que « getCircleInfo » est une exportation nommée.

Organisation des modules dans un projet

Pour les projets de grande envergure comportant de nombreux modules, l'organisation devient cruciale. Tenez compte des conseils suivants:

  • Structure du répertoire: Regroupez les modules associés dans des répertoires tels que `models/`, `services/` et `utils/`.
  • Fichiers d'index: Utilisez les fichiers `index.ts` dans les répertoires pour regrouper et réexporter les modules, simplifiant ainsi les importations dans l'ensemble du projet.

Exemple de structure de répertoire:

project/
│
├── src/
│   ├── models/
│   │   ├── index.ts
│   │   └── user.ts
│   └── app.ts

Conclusion

Les modules TypeScript sont une fonctionnalité clé pour l'organisation et la gestion du code. En créant et en utilisant des modules, le code peut être maintenu modulaire, maintenable et évolutif. Comprendre comment exporter et importer du code, ainsi que comment structurer un projet, améliore l'efficacité du développement TypeScript.