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

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

Le développement d'applications complexes en TypeScript nécessite non seulement la connaissance de la syntaxe, mais aussi la capacité de construire une architecture flexible et évolutive. Les modèles de conception GoF (Gang of Four) restent la référence, mais à un niveau avancé, leur application devient plus subtile. Dans cet article, nous analyserons quatre modèles puissants — Bridge, Visitor, State et Strategy — avec des exemples concrets en TypeScript. Vous apprendrez à utiliser le typage strict, les génériques et les interfaces pour implémenter ces modèles.

1. Bridge : séparer l'abstraction de l'implémentation

Le modèle Bridge (Pont) sépare l'abstraction de son implémentation, permettant de les modifier indépendamment. Cela est particulièrement utile lorsque vous avez plusieurs variantes de fonctionnalités qui peuvent être combinées.

Exemple : Système de rendu de formes dans différentes API graphiques (Canvas et SVG).

// Implémentation (Implementation)\ninterface Renderer {\n    renderCircle(radius: number): void;\n    renderSquare(side: number): void;\n}\n\nclass CanvasRenderer implements Renderer {\n    renderCircle(radius: number): void {\n        console.log(`Canvas : dessin d'un cercle de rayon ${radius}`);\n    }\n    renderSquare(side: number): void {\n        console.log(`Canvas : dessin d'un carré de côté ${side}`);\n    }\n}\n\nclass SVGRenderer implements Renderer {\n    renderCircle(radius: number): void {\n        console.log(`SVG : <circle r="${radius}" />`);\n    }\n    renderSquare(side: number): void {\n        console.log(`SVG : <rect width="${side}" height="${side}" />`);\n    }\n}\n\n// Abstraction (Abstraction)\nabstract class Shape {\n    protected renderer: Renderer;\n\n    constructor(renderer: Renderer) {\n        this.renderer = renderer;\n    }\n\n    abstract draw(): void;\n}\n\nclass Circle extends Shape {\n    private radius: number;\n\n    constructor(renderer: Renderer, radius: number) {\n        super(renderer);\n        this.radius = radius;\n    }\n\n    draw(): void {\n        this.renderer.renderCircle(this.radius);\n    }\n}\n\nclass Square extends Shape {\n    private side: number;\n\n    constructor(renderer: Renderer, side: number) {\n        super(renderer);\n        this.side = side;\n    }\n\n    draw(): void {\n        this.renderer.renderSquare(this.side);\n    }\n}\n\n// Utilisation\nconst canvasCircle = new Circle(new CanvasRenderer(), 10);\ncanvasCircle.draw(); // Canvas : dessin d'un cercle de rayon 10\n\nconst svgSquare = new Square(new SVGRenderer(), 5);\nsvgSquare.draw(); // SVG : <rect width="5" height="5" />

Caractéristique clé : TypeScript garantit que toutes les implémentations respectent le contrat Renderer. L'ajout d'un nouveau type de forme ou d'un nouveau moteur de rendu ne casse pas le code existant.

2. Visitor : parcourir des structures complexes sans modifier les classes

Le modèle Visitor (Visiteur) permet d'ajouter de nouvelles opérations aux objets sans modifier leurs classes. C'est une solution idéale pour travailler avec des arbres, des AST (arbres syntaxiques abstraits) ou des hiérarchies de composants.

Exemple : Système d'exportation de nœuds de document vers différents formats (JSON, XML).

// Éléments (Elements)\ninterface DocumentNode {\n    accept(visitor: Visitor): void;\n}\n\nclass TextNode implements DocumentNode {\n    constructor(public content: string) {}\n\n    accept(visitor: Visitor): void {\n        visitor.visitTextNode(this);\n    }\n}\n\nclass ImageNode implements DocumentNode {\n    constructor(public src: string, public alt: string) {}\n\n    accept(visitor: Visitor): void {\n        visitor.visitImageNode(this);\n    }\n}\n\n// Visiteur (Visitor)\ninterface Visitor {\n    visitTextNode(node: TextNode): void;\n    visitImageNode(node: ImageNode): void;\n}\n\nclass JSONExporter implements Visitor {\n    private p