Modules et Importations en Typescript

Salut à tous ! On a déjà bien avancé avec les fonctions et les fonctions fléchées.

Maintenant, on va explorer comment organiser notre code avec les modules et les importations en Typescript. Pour changer un peu des personnages de jeux vidéo, imaginons qu'on construit une application de gestion de recettes de cuisine. Oui, tu as bien lu : on va parler de cuisine ! 🍳

Qu'est-ce qu'un Module ?

En Typescript, un module est un fichier contenant du code. Chaque fichier est traité comme un module et peut exporter des variables, fonctions, classes, interfaces, etc., qui peuvent être utilisées dans d'autres modules.

Exportations

Pour rendre une variable, une fonction ou une classe disponible dans un autre module, on utilise le mot-clé export.

Exporter des Fonctions et des Variables

// recipeUtils.ts
export function calculateIngredients(servings: number): number {
  return servings * 2
}

export const defaultServings: number = 4

Exporter des Classes et des Interfaces

// recipe.ts
export class Recipe {
  constructor(
    public name: string,
    public ingredients: string[],
    public servings: number,
  ) {}

  printRecipe(): void {
    console.log(`Recipe: ${this.name}`)
    console.log(`Servings: ${this.servings}`)
    console.log('Ingredients:')
    this.ingredients.forEach((ingredient) => console.log(`- ${ingredient}`))
  }
}

Importations

Pour utiliser les éléments exportés dans un autre fichier, on utilise le mot-clé import.

Importer des Fonctions et des Variables

// app.ts
import { calculateIngredients, defaultServings } from './recipeUtils'

console.log(`Default servings: ${defaultServings}`)
console.log(`Ingredients needed for 5 servings: ${calculateIngredients(5)}`)

Importer des Classes et des Interfaces

// main.ts
import { Recipe } from './recipe'

let pancakeRecipe = new Recipe(
  'Pancakes',
  ['flour', 'eggs', 'milk', 'butter'],
  4,
)
pancakeRecipe.printRecipe()

Exportations par Défaut

Un module peut avoir une exportation par défaut, qui est un export unique. Utilise le mot-clé default pour désigner l'exportation par défaut.

Exportation par Défaut

// config.ts
export default {
  apiUrl: '<https://api.recipes.com>',
  apiKey: 'abcdef123456',
}

Importation d'une Exportation par Défaut

// settings.ts
import config from './config'

console.log(`API URL: ${config.apiUrl}`)

Renommer les Imports

Il est parfois utile de renommer les imports pour éviter les conflits de nom ou pour plus de clarté.

// conversions.ts
export function toCups(grams: number): number {
  return grams / 128
}

export function toGrams(cups: number): number {
  return cups * 128
}

// measurements.ts
import { toCups as gramsToCups, toGrams as cupsToGrams } from './conversions'

console.log(gramsToCups(256)) // 2 cups
console.log(cupsToGrams(2)) // 256 grams

Modules Externes

Les modules externes (ou bibliothèques) comme lodash, express, ou moment peuvent être utilisés dans un projet Typescript en les installant via npm et en utilisant des types d'interface (type definitions).

Installation et Utilisation d'un Module Externe

npm install moment
npm install @types/moment

// timeUtils.ts
import * as moment from 'moment'

console.log(moment().format('MMMM Do YYYY, h:mm:ss a')) // Mai 24th 2024, 2:00:00 pm

Structurer un Projet Typescript

Pour un projet bien structuré, on organise les modules en dossiers. Par exemple, dans notre application de gestion de recettes, on pourrait avoir des dossiers pour les recettes, les utilitaires, les configurations, etc.

/src
  /recipes
    recipe.ts
    pancake.ts
  /utils
    recipeUtils.ts
    conversions.ts
  /config
    config.ts
  app.ts
  main.ts
  settings.ts

Dans cet exemple, chaque dossier contient des fichiers modules liés à une fonctionnalité spécifique. Cela rend le projet plus facile à maintenir et à comprendre.

Conclusion

Les modules et les importations sont des outils puissants en Typescript pour organiser et structurer ton code. Ils permettent de diviser un projet en morceaux réutilisables et maintenables, facilitant ainsi le développement de projets complexes. Dans notre prochain article, nous explorerons les types avancés pour tirer encore plus de puissance de Typescript.