Modèles de conception en TypeScript : niveau avancé avec exemples

Patrons de conception en TypeScript : niveau avancé avec exemples

Lorsque les patrons de base (Singleton, Méthode de Fabrique, Observateur) sont maîtrisés, il est temps de passer à des solutions architecturales plus complexes. TypeScript, avec son puissant système de types, ses génériques et ses décorateurs, ouvre de nouvelles possibilités pour implémenter les patrons GoF avancés. Dans cet article, nous allons analyser quatre patrons clés : Fabrique Abstraite, Monteur, Chaîne de Responsabilité et Stratégie — en mettant l'accent sur les spécificités de TypeScript.

1. Fabrique Abstraite (Abstract Factory) avec familles typées

Le patron « Fabrique Abstraite » permet de créer des familles d'objets interdépendants sans les lier à des classes concrètes. En TypeScript, nous pouvons utiliser des interfaces et des génériques pour un typage strict des produits.

Exemple : Création de composants d'interface utilisateur pour différents systèmes d'exploitation.

// Produits abstraitsinterface Button {  render(): void;  click(): void;}

interface Checkbox {  render(): void;  toggle(): void;}

// Produits concrets pour Windowsclass WinButton implements Button {  render() { console.log('Rendu du bouton Windows'); }  click() { console.log('Clic sur le bouton Windows'); }}

class WinCheckbox implements Checkbox {  render() { console.log('Rendu de la case à cocher Windows'); }  toggle() { console.log('Basculement de la case à cocher Windows'); }}

// Produits concrets pour macOSclass MacButton implements Button {  render() { console.log('Rendu du bouton macOS'); }  click() { console.log('Clic sur le bouton macOS'); }}

class MacCheckbox implements Checkbox {  render() { console.log('Rendu de la case à cocher macOS'); }  toggle() { console.log('Basculement de la case à cocher macOS'); }}

// Fabrique abstraiteinterface GUIFactory {  createButton(): Button;  createCheckbox(): Checkbox;}

// Fabriques concrètesclass WinFactory implements GUIFactory {  createButton(): Button { return new WinButton(); }  createCheckbox(): Checkbox { return new WinCheckbox(); }}

class MacFactory implements GUIFactory {  createButton(): Button { return new MacButton(); }  createCheckbox(): Checkbox { return new MacCheckbox(); }}

// Utilisationfunction createUI(factory: GUIFactory) {  const button = factory.createButton();  const checkbox = factory.createCheckbox();  button.render();  checkbox.render();}

createUI(new WinFactory());// Rendu du bouton Windows// Rendu de la case à cocher Windows

Astuce avancée : Utilisez des génériques si la fabrique doit fonctionner avec différents types de produits :

abstract class AbstractFactory<TProduct> {  abstract createProduct(): TProduct;}

class ConcreteFactory extends AbstractFactory<Button> {  createProduct(): Button {    return new WinButton();  }}

2. Monteur (Builder) avec interface fluide et immutabilité

Le patron « Monteur » est utile lorsqu'un objet possède de nombreux paramètres optionnels. TypeScript permet de créer un builder typé avec chaînage de méthodes.

Exemple : Configuration d'une requête HTTP.

class HttpRequest {  private constructor(    public readonly url: string,    public readonly method: 'GET' | 'POST' | 'PUT',    public readonly headers: Record<string, string>,    public readonly body?: string  ) {}

  static builder(): HttpRequestBuilder {    return new HttpRequestBuilder();  }}

class HttpRequestBuilder {  private url: string = '';  private method: 'GET' | 'POST' | 'PUT' = 'GET';  private headers: Record<string, string> = {};  private body?: string;

  setUrl(url: string): this {    this.url = url;    return this;  }

  setMethod(method: 'GET' | 'POST' | 'PUT'): this {    this.method = method;    return this;  }

  addH