Modèles de conception en TypeScript : exemples et implémentation

Patrons de conception en TypeScript : de la théorie à la pratique

Les patrons de conception (Design Patterns) sont des solutions éprouvées aux problèmes typiques du développement logiciel. Dans le contexte de TypeScript, avec son puissant système de types et son support de la POO, de nombreux patrons classiques du livre du "Gang of Four" (GoF) trouvent une incarnation nouvelle et plus élégante. Dans cet article, nous allons analyser trois patrons clés avec des exemples concrets en TypeScript, qui vous aideront à écrire un code plus propre, plus évolutif et plus maintenable.

1. Patron de création : Singleton

Objectif : Garantir qu'une classe n'a qu'une seule instance et fournir un point d'accès global à celle-ci.

En TypeScript, l'implémentation du Singleton est particulièrement pratique grâce aux propriétés statiques et aux constructeurs privés. Ce patron est idéal pour gérer les connexions à la base de données, les journaux (loggers) ou les caches.

class DatabaseConnection {    private static instance: DatabaseConnection;    private connectionString: string;

    private constructor(connectionString: string) {        this.connectionString = connectionString;        console.log(`Connexion créée vers : ${connectionString}`);    }

    public static getInstance(connectionString?: string): DatabaseConnection {        if (!DatabaseConnection.instance) {            if (!connectionString) {                throw new Error("Connection string required for first initialization");            }            DatabaseConnection.instance = new DatabaseConnection(connectionString);        }        return DatabaseConnection.instance;    }

    public query(sql: string): void {        console.log(`Exécution de la requête : ${sql} sur ${this.connectionString}`);    }}

// Utilisationconst db1 = DatabaseConnection.getInstance("postgres://localhost:5432/mydb");const db2 = DatabaseConnection.getInstance();

console.log(db1 === db2); // true — le même objetdb1.query("SELECT * FROM users");

Important : En TypeScript, vous pouvez utiliser readonly et les génériques pour des implémentations plus flexibles. Cependant, rappelez-vous que le Singleton peut compliquer les tests — envisagez l'injection de dépendances (DI) comme alternative.

2. Patron structurel : Decorator (Décorateur)

Objectif : Ajouter dynamiquement de nouvelles responsabilités à un objet sans modifier sa structure. En TypeScript, les décorateurs sont une fonctionnalité de premier ordre du langage (expérimentale en ES5, mais activement utilisée dans Angular et NestJS).

Prenons un exemple avec un décorateur pour journaliser les appels de méthodes :

// Interface cibleinterface ILogger {    log(message: string): void;}

// Classe de baseclass SimpleLogger implements ILogger {    public log(message: string): void {        console.log(`[LOG]: ${message}`);    }}

// Décorateur (classe d'emballage)class TimestampDecorator implements ILogger {    private logger: ILogger;

    constructor(logger: ILogger) {        this.logger = logger;    }

    public log(message: string): void {        const timestamp = new Date().toISOString();        this.logger.log(`[${timestamp}] ${message}`);    }}

// Décorateur pour le formatageclass UpperCaseDecorator implements ILogger {    private logger: ILogger;

    constructor(logger: ILogger) {        this.logger = logger;    }

    public log(message: string): void {        this.logger.log(message.toUpperCase());    }}

// Utilisationlet logger: ILogger = new SimpleLogger();logger.log("Bonjour le monde"); // [LOG]: Bonjour le monde

logger = new TimestampDecorator(logger);logger = new UpperCaseDecorator(logger);logger.log("les décorateurs fonctionnent"); // [LOG]: [2025-01-15T10:30:00.000Z] LES DÉCORATEURS FONCTIONNENT

Conseil : En TypeScript, les décorateurs de classes et de propriétés sont également disponibles (syntaxe @decorator