Accueil/Notions/Modules (JavaScript)

Modules (JavaScript)

Les modules en JavaScript permettent de structurer ton code en séparant les différentes parties de ton application dans des fichiers distincts. Cela rend ton code plus facile à maintenir, à tester et à réutiliser. En TypeScript, les modules fonctionnent de manière similaire à ceux de JavaScript, mais ils profitent également des avantages du typage statique.

Les modules en TypeScript

En TypeScript, un module est tout fichier contenant du code. Par défaut, chaque fichier est traité comme un module. Les modules peuvent exporter des classes (programmation), fonctions (programmation), variables (programmation), et interfaces (programmation), qui peuvent ensuite être importés dans d'autres modules.

Exemple simple : Exporter et Importer un Module

Étape 1 : Créer un module

Imaginons que tu crées un fichier mathUtils.ts pour gérer des fonctions mathématiques. Voici comment tu pourrais écrire ce module :

// mathUtils.ts

// On exporte une constante
export const PI = 3.14;

// On exporte une fonction
export function add(a: number, b: number): number {
  return a + b;
}

// On exporte une classe
export class Calculator {
  multiply(a: number, b: number): number {
    return a * b;
  }
}

Étape 2 : Importer le module

Maintenant, tu veux utiliser ces fonctionnalités dans un autre fichier, disons app.ts :

// app.ts

// Importation des membres exportés de mathUtils
import { PI, add, Calculator } from './mathUtils';

console.log(`La valeur de PI est ${PI}`); // La valeur de PI est 3.14

const sum = add(5, 7);
console.log(`La somme de 5 et 7 est ${sum}`); // La somme de 5 et 7 est 12

const calculator = new Calculator();
console.log(`Le produit de 5 et 7 est ${calculator.multiply(5, 7)}`); // Le produit de 5 et 7 est 35

Points Clés à Retenir

  1. Exporter : Utilise export pour rendre des variables, fonctions, ou classes disponibles à partir d'un module.
  2. Importer : Utilise import pour accéder aux exports d'un autre module.
  3. Alias d'importation : Si nécessaire, tu peux renommer les importations pour éviter les conflits de noms.

Exemple avec des alias :

// app.ts

import { add as addition, Calculator as Calc } from './mathUtils';

const sum = addition(10, 20);
console.log(`La somme de 10 et 20 est ${sum}`); // La somme de 10 et 20 est 30

const calc = new Calc();
console.log(`Le produit de 10 et 20 est ${calc.multiply(10, 20)}`); // Le produit de 10 et 20 est 200

Modules par Défaut

Parfois, tu voudras peut-être exporter un seul élément par défaut dans ton module. Voici comment tu peux le faire :

Export par défaut

// mathUtils.ts

export default class DefaultCalculator {
  divide(a: number, b: number): number {
    if (b === 0) throw new Error("Division par zéro !");
    return a / b;
  }
}

Importer un export par défaut

// app.ts

import DefaultCalculator from './mathUtils';

const defaultCalculator = new DefaultCalculator();
console.log(`La division de 10 par 2 est ${defaultCalculator.divide(10, 2)}`); // La division de 10 par 2 est 5

Conclusion

Les modules en TypeScript permettent de structurer ton code de manière claire et modulaire, facilitant ainsi la maintenance et la réutilisation. En utilisant les exports et les imports, tu peux organiser ton code en petites parties gérables et clairement définies.

Voici une liste de notions avancées et complémentaires que tu peux explorer pour approfondir tes connaissances sur les modules et d'autres concepts clés en TypeScript et JavaScript :

Modules et Chargement de Modules

  1. Types de modules (CommonJS, ES6 Modules)

    • Différences entre CommonJS et ES6 Modules
    • Comment les utiliser dans des environnements différents (Node.js vs navigateurs web)

  2. Système de Résolution des Modules

    • Comment TypeScript et JavaScript résolvent les chemins d'importation
    • Les configurations spécifiques à TypeScript (tsconfig.json)

  3. Dynamic Imports

    • Importation dynamique avec import()
    • Utilisation des modules dynamiques pour le chargement asynchrone

  4. Re-exports

    • Comment réexporter des éléments d'un autre module
    • Utilisation de export * from et export { ... } from

Types Avancés et Génériques

  1. Types Avancés

    • Types utilitaires (Partial, Pick, Omit, etc.)
    • types conditionnels
    • Types d'Intersections et Unions

  2. Génériques

    • Utilisation des génériques pour créer des fonctions et classes réutilisables
    • Contraintes de types génériques

Décorateurs

  1. Décorateurs de Classes et Méthodes
    • Introduction aux décorateurs en TypeScript
    • Utilisation des décorateurs pour la métaprogrammation

Gestion des Modules et Bundling

  1. Bundlers (Webpack, Rollup, Parcel)

    • Introduction aux outils de bundling
    • Configuration de base et avancée

  2. tree shaking

    • Techniques pour réduire la taille de ton bundle
    • Éliminer le code mort

Autres Concepts TypeScript

  1. Namespaces

    • Différences entre namespaces et modules
    • Quand utiliser les namespaces

  2. Type Inference

    • Comment TypeScript infère les types automatiquement
    • Bonnes pratiques pour tirer parti de l'inférence de type

  3. Type Guards

    • Techniques pour affiner les types à l'exécution
    • Utilisation des assertions de type

Gestion des Dépendances

  1. npm, Yarn, et pnpm
    • Gestion des paquets et des versions
    • Monorepos et workspace management

Tests et Types

  1. Tests Unitaires avec TypeScript

    • Introduction aux frameworks de test (Jest, Mocha, etc.)
    • Comment écrire des tests pour les modules TypeScript

  2. Types pour les Tests

    • Typage des Mocks (testing) et des Stubs
    • Utilisation des types dans les tests pour une meilleure sécurité de type

Outils et Pratiques DevOps

  1. Linting et Formatting

    • Outils comme ESLint et Prettier
    • Configurations spécifiques pour TypeScript

  2. CI/CD pour TypeScript

En explorant ces notions, tu pourras non seulement maîtriser l'utilisation des modules en TypeScript, mais aussi améliorer tes compétences globales en développement avec TypeScript et JavaScript.