Design Patterns en TypeScript

Voici une cheatsheet exhaustive en français pour TypeScript :

Patterns créatifs

Singleton

class Database {
    private static instance: Database;
    private data: any[] = [];

    private constructor() {}

    public static getInstance(): Database {
        if (!Database.instance) {
            Database.instance = new Database();
        }
        return Database.instance;
    }

    public addData(item: any): void {
        this.data.push(item);
    }

    public getData(): any[] {
        return this.data;
    }
}

Utilisé pour contrôler l'accès à une ressource unique

Factory Method

interface Shape {
    draw(): void;
}

class Circle implements Shape {
    draw(): void {
        console.log("Drawing a circle");
    }
}

class Square implements Shape {
    draw(): void {
        console.log("Drawing a square");
    }
}

abstract class ShapeFactory {
    abstract getShape(shapeType: string): Shape;

    static getInstance(shapeType: string): Shape {
        if (!ShapeFactory.instance) {
            ShapeFactory.instance = new ShapeFactory();
        }
        return ShapeFactory.instance.getShape(shapeType);
    }
}

Utilisé pour créer des objets sans spécifier la classe exacte

Patterns structurels

Adapter

interface MediaPlayer {
    play(format: string, file: string): void;
}

class AudioPlayer implements MediaPlayer {
    play(format: string, file: string): void {
        if (format === "mp3") {
            console.log(`Playing mp3 ${file}`);
        } else {
            console.log("Unsupported format");
        }
    }
}

interface AdvancedMediaPlayer {
    playVlc(file: string): void;
    playMp4(file: string): void;
}

class VlcPlayer implements AdvancedMediaPlayer {
    playVlc(file: string): void {
        console.log(`Playing vlc ${file}`);
    }

    playMp4(file: string): void {}
}

class MediaAdapter implements MediaPlayer {
    private advancedMediaPlayer: AdvancedMediaPlayer;

    constructor(advancedMediaPlayer: AdvancedMediaPlayer) {
        this.advancedMediaPlayer = advancedMediaPlayer;
    }

    play(format: string, file: string): void {
        if (format === "vlc") {
            this.advancedMediaPlayer.playVlc(file);
        } else if (format === "mp4") {
            this.advancedMediaPlayer.playMp4(file);
        }
    }
}

Utilisé pour rendre les interfaces incompatibles compatibles

Decorator

interface Coffee {
    cost(): number;
}

class SimpleCoffee implements Coffee {
    cost(): number {
        return 10;
    }
}

abstract class CoffeeDecorator implements Coffee {
    protected coffee: Coffee;

    constructor(coffee: Coffee) {
        this.coffee = coffee;
    }

    abstract cost(): number;
}

class MilkDecorator extends CoffeeDecorator {
    cost(): number {
        return super.cost() + 2;
    }
}

Utilisé pour ajouter des responsabilités à un objet dynamiquement

Patterns comportementaux

Observer

interface Observer {
    update(message: string): void;
}

class Subscriber implements Observer {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    update(message: string): void {
        console.log(`${this.name} received message: ${message}`);
    }
}

class Subject {
    private observers: Observer[] = [];

    addObserver(observer: Observer): void {
        this.observers.push(observer);
    }

    notifyObservers(message: string): void {
        this.observers.forEach(observer => observer.update(message));
    }
}

Utilisé pour maintenir un état cohérent entre les objets

Strategy

interface PaymentStrategy {
    pay(amount: number): void;
}

class CreditCardPayment implements PaymentStrategy {
    private cardNumber: string;

    constructor(cardNumber: string) {
        this.cardNumber = cardNumber;
    }

    pay(amount: number): void {
        console.log(`Paid ${amount} using credit card with number ${this.cardNumber}`);
    }
}

class PayPalPayment implements PaymentStrategy {
    private email: string;

    constructor(email: string) {
        this.email = email;
    }

    pay(amount: number): void {
        console.log(`Paid ${amount} using PayPal account with email ${this.email}`);
    }
}

class ShoppingCart {
    private paymentStrategy: PaymentStrategy;

    setPaymentStrategy(paymentStrategy: PaymentStrategy): void {
        this.paymentStrategy = paymentStrategy;
    }

    checkout(amount: number): void {
        this.paymentStrategy.pay(amount);
    }
}

Utilisé pour définir une famille de algorithmes et les rendre interchangeables

Ceci fournit un aperçu des principaux patterns en TypeScript, chacun avec un exemple concret et une explication.