TypeScriptLeçon 14 sur 16

Modules et namespaces : organiser son code

Dans un vrai projet, chaque fichier est un module : on exporte ce dont les autres ont besoin et on l'importe là où on s'en sert. Cette leçon tient en un seul fichier, donc un simple objet joue le rôle du module.

L’essentiel

Un fichier avec import ou export est un module doté de sa propre portée.
export function format() {...} dans un fichier, import { format } from "./money" dans un autre.
import type n'importe que des types, et la ligne disparaît à la compilation.
namespace est antérieur aux modules ES ; il n'est pas déprécié, mais TypeScript recommande les modules pour le code neuf.
L'exécution directe des .ts par Node.js et l'option erasableSyntaxOnly refusent les namespaces, comme les enum.

Exemple

// In a real project every file is a module:////   // money.ts//   export type Currency = "USD" | "EUR";//   export function format(amount: number, currency: Currency): string { ... }////   // main.ts//   import { format } from "./money";//   import type { Currency } from "./money"; // type-only, erased after compiling//// The lesson runs in one file, so a plain object plays the role of the module.type Currency = "USD" | "EUR"; const money = {  format(amount: number, currency: Currency): string {    return `${amount.toFixed(2)} ${currency}`;  },  add(a: number, b: number): number {    return Math.round((a + b) * 100) / 100;  },}; console.log(money.format(money.add(0.1, 0.2), "EUR"));

Le commentaire montre money découpé en deux fichiers. L'objet money regroupe des fonctions liées sous un seul nom, exactement comme le ferait un module.

Exercice

Utiliser l’éditeur⌘ Entrée ou Ctrl Entrée lance le code, ⇧ ⌘ Entrée vérifie l’exercice.Tab et Maj Tab indentent la ligne ou la sélection ; Échap puis Tab quitte l’éditeur.La vérification compare ce que le programme a affiché à l’exercice ; les espaces en fin de ligne ne comptent pas.Après deux vérifications ratées, la solution s’ouvre. Votre code reste dans ce navigateur.

Réécrivez namespace Temperature en simple objet temperature, ajoutez une méthode toCelsius et affichez quatre lignes : « 0C = 32F », « 25C = 77F », « 100C = 212F », « 212F = 100C ».

// Old style: a TypeScript namespace. It still compiles,// but it is TypeScript-only syntax that adds runtime code.// TODO: replace it with a plain object called temperature// and add toCelsius(fahrenheit: number): numbernamespace Temperature {  export function toFahrenheit(celsius: number): number {    return (celsius * 9) / 5 + 32;  }} for (const celsius of [0, 25, 100]) {  console.log(`${celsius}C = ${Temperature.toFahrenheit(celsius)}F`);}// TODO: print "212F = 100C" with temperature.toCelsius(212)

// Old style: a TypeScript namespace. It still compiles,
// but it is TypeScript-only syntax that adds runtime code.
// TODO: replace it with a plain object called temperature
// and add toCelsius(fahrenheit: number): number
namespace Temperature {
  export function toFahrenheit(celsius: number): number {
    return (celsius * 9) / 5 + 32;
  }
}

for (const celsius of [0, 25, 100]) {
  console.log(`${celsius}C = ${Temperature.toFahrenheit(celsius)}F`);
}
// TODO: print "212F = 100C" with temperature.toCelsius(212)

Sortie

Ce que le programme affiche apparaîtra ici.