Les modules

Introduction

Une variable déclarée à l’extérieur de tout bloc de code a une portée globale. Il en est de même pour les fonctions et les classes. Cette portée globale leur permet d’être accessibles à travers l’intégralité du programme, mais pose un problème si une autre déclaration (variable, fonction ou classe) utilise le même nom. Ce phénomène, appelé collision de nom, peut entraîner des erreurs ou des comportements inattendus lors de l’exécution du programme. Le compilateur de TypeScript détecte ces collisions et lève une erreur lors de la compilation.

Exemple :

// Compilation error TS2393: 
// Duplicate function implementation. 
function getSalary() { 
  return 10000; 
} 
 
// Compilation error TS2393: 
// Duplicate function implementation. 
function getSalary() { 
  return 10; 
} 
 
console.log(getSalary()); 

Dans cet exemple, si le code est exécuté, alors la dernière ligne affichera 10 dans la console. En effet, la seconde déclaration de la fonction getSalary() écrase la précédente.

Avoir des déclarations qui ont une portée globale est donc une très mauvaise pratique qui entrave considérablement l’évolutivité...

Historique

const salariedModule = (function() { 
  const salary = 20_000; 
 
  return { 
    getSalary: function() { 
      return salary; 
    } 
  }; 
})(); 
 
const employeeModule = (function(salariedModule) { 
  return { 
    personList: ["Evelyn", "John"], 
    getSalary: function() { 
      return salariedModule.getSalary(); 
    } 
 }; 
})(salariedModule); 
 
const managerModule = (function(salariedModule) { 
  const bonus = 40_000; 
  return { 
    personList: ["Patrick", "David"], 
    getSalary: function() { 
      return salariedModule.getSalary() + bonus; 
    } 
  }; 
})(salariedModule); 
 
// Log: 20 000 
console.log(employeeModule.getSalary()); 
 
// Log: 60 000 
console.log(managerModule.getSalary()); 
 
// Log: ["Evelyn", "John"] 
console.log(employeeModule.personList); 
 
// Log: ["Patrick", "David"] ...

La norme ECMAScript 2015

Les modules définis par la norme ECMAScript 2015 tirent le meilleur parti des normes CommonJS et AMD. Comme pour CommonJS, la norme propose une syntaxe simple permettant d’exporter et importer les données d’un module via deux mots-clés :

Dès lors qu’un fichier possède l’un de ces mots-clés, il devient un module. Il ne peut donc y avoir qu’un seul module par fichier. Les modules ECMAScript 2015 visent à supporter le chargement asynchrone et synchrone. Ils permettent aussi de gérer les dépendances cycliques (bien que cela soit considéré comme une mauvaise pratique).

Exemple (premier module) :

/** 
 * salariedModule.js 
 */ 
const salary = 20_000; 
 
export const salaried = { 
  getSalary: function() { 
    return salary; 
  } 
}; 

Exemple (second module) :

/** 
 * employeeModule.js 
 */ 
import { salaried } from "./salariedModule"; 
 
export const employee = { 
  personList: ["Patrick", "David"], 
  getSalary: function() { 
    return salaried.getSalary(); 
  } 
}; 

Exemple (troisième module) :

/** 
 * managerModule.js 
 */ 
import { salaried } from "./salariedModule"; 
 
const bonus = 40_000; 
 
export const manager = { 
  personList: ["Patrick", "David"], 
  getSalary: function() { 
    return salaried.getSalary() + bonus; 
  } 
}; 

Exemple (utilisation des trois modules) :

/** 
 * main.js 
 */ 
import { employee } from "./employeeModule"; ...

Gestion des types

Import type

Comme dit précédemment, les types définis en TypeScript ne sont utiles qu’à la compilation et sont supprimés lors de la transpilation en code JavaScript.

Exemple (export) :

/**   
 * type.js   
 */   
export interface Employee {  
  // ...  
} 

Exemple (import) :

/**  
 * main.ts  
 */  
import { Employee } from "./type"; 
 
const evelyn: Employee = { 
 // ... 
}; 

Dans cet exemple, le fichier type.ts disparaîtra lors de la transpilation, ainsi que la ligne d’import du fichier main.ts. Il existe une notation qui permet d’aider le compilateur et de rendre ce comportement plus explicite : l’import et export de type.

Syntaxe (export) :

export type { element1, element2, ... } from "./path/to/module"; 

Exemple (export) :

// type.ts 
export type interface Employee { 
  // ... 
} 

Syntaxe (import) :

import type { element1, element2, ... } from "./path/to/module"; 

Exemple (import) :

// main.ts 
import type { Employee } from "./type"; 
 
const evelyn: Employee = { 
 // ... 
}; 

Chargement et résolutions

import { employee } from "./employeeModule";