Modèles de conception avancés dans TypeScript

Les modèles de conception sont des solutions éprouvées aux problèmes récurrents dans la conception de logiciels. Ils améliorent la lisibilité, l’évolutivité et la maintenabilité du code. TypeScript, avec son typage puissant et sa base JavaScript moderne, est un excellent langage pour implémenter efficacement ces modèles.

Cet article se penche sur les modèles de conception avancés et couramment utilisés, expliquant leurs concepts, leurs implémentations TypeScript et leurs cas d'utilisation pratiques. Que vous soyez un développeur chevronné ou que vous exploriez TypeScript, vous obtiendrez des informations précieuses sur la création d'applications robustes.

Que sont les modèles de conception ?

Les modèles de conception sont des solutions réutilisables aux problèmes de conception courants. Ils sont classés en trois types principaux :

1. Modèles de création : Gérez la création d'objets.
2. Modèles structurels : Concentrez-vous sur la composition des objets.
3. Modèles comportementaux : Concernés par l'interaction avec les objets.

Modèles de conception créationnels dans TypeScript

1. Modèle Singleton
Garantit qu'une classe n'a qu'une seule instance dans toute l'application.

Cas d'utilisation : Gestion de l'état global ou des configurations.

Mise en œuvre :

class Singleton {
  private static instance: Singleton;

  private constructor() {}

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

  public showMessage(): void {
    console.log("Hello, Singleton!");
  }
}

// Usage
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();
console.log(singleton1 === singleton2); // true

2. Méthode d'usine
Crée des objets sans spécifier leur classe exacte.

Cas d'utilisation : Lorsque la logique de création d'objet doit être abstraite.

Mise en œuvre :

interface Product {
  operation(): string;
}

class ConcreteProductA implements Product {
  operation(): string {
    return "Product A";
  }
}

class ConcreteProductB implements Product {
  operation(): string {
    return "Product B";
  }
}

abstract class Creator {
  abstract factoryMethod(): Product;

  someOperation(): string {
    const product = this.factoryMethod();
    return `Creator: ${product.operation()}`;
  }
}

class ConcreteCreatorA extends Creator {
  factoryMethod(): Product {
    return new ConcreteProductA();
  }
}

class ConcreteCreatorB extends Creator {
  factoryMethod(): Product {
    return new ConcreteProductB();
  }
}

// Usage
const creatorA = new ConcreteCreatorA();
console.log(creatorA.someOperation());

3. Modèle de constructeur
Sépare la construction d'un objet de sa représentation.

Cas d'utilisation : Construisez des objets complexes étape par étape.

Mise en œuvre :

class Product {
  private parts: string[] = [];

  addPart(part: string): void {
    this.parts.push(part);
  }

  listParts(): void {
    console.log(`Product parts: ${this.parts.join(", ")}`);
  }
}

class Builder {
  private product = new Product();

  reset(): void {
    this.product = new Product();
  }

  addPartA(): void {
    this.product.addPart("Part A");
  }

  addPartB(): void {
    this.product.addPart("Part B");
  }

  getProduct(): Product {
    const result = this.product;
    this.reset();
    return result;
  }
}

// Usage
const builder = new Builder();
builder.addPartA();
builder.addPartB();
const product = builder.getProduct();
product.listParts();

Modèles de conception structurelle dans TypeScript

1. Modèle d'adaptateur
Convertit l'interface d'une classe en une autre interface.

Cas d'utilisation : Intégration de bibliothèques tierces.

Mise en œuvre :

class OldSystem {
  oldRequest(): string {
    return "Old System";
  }
}

class NewSystem {
  newRequest(): string {
    return "New System";
  }
}

class Adapter extends OldSystem {
  private adaptee: NewSystem;

  constructor(adaptee: NewSystem) {
    super();
    this.adaptee = adaptee;
  }

  oldRequest(): string {
    return this.adaptee.newRequest();
  }
}

// Usage
const adaptee = new NewSystem();
const adapter = new Adapter(adaptee);
console.log(adapter.oldRequest());

2. Modèle composite
Compose des objets en structures arborescentes pour représenter des hiérarchies partie-tout.

Cas d'utilisation : Gestion des données hiérarchiques.

Mise en œuvre :

abstract class Component {
  abstract operation(): string;
}

class Leaf extends Component {
  operation(): string {
    return "Leaf";
  }
}

class Composite extends Component {
  private children: Component[] = [];

  add(component: Component): void {
    this.children.push(component);
  }

  operation(): string {
    const results = this.children.map(child => child.operation());
    return `Composite(${results.join(", ")})`;
  }
}

// Usage
const leaf = new Leaf();
const composite = new Composite();
composite.add(leaf);
console.log(composite.operation());

Modèles de conception comportementale dans TypeScript

1. Modèle d'observateur
Définit une dépendance entre les objets afin qu'un objet change d'état, toutes les dépendances soient notifiées.

Cas d'utilisation : Systèmes d'événements.

Mise en œuvre :

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

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

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

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

class ConcreteObserver implements Observer {
  update(message: string): void {
    console.log(`Received message: ${message}`);
  }
}

// Usage
const subject = new Subject();
const observer1 = new ConcreteObserver();
const observer2 = new ConcreteObserver();
subject.attach(observer1);
subject.attach(observer2);
subject.notify("Event occurred!");

2. Modèle de stratégie
Définit une famille d'algorithmes et les rend interchangeables.

Cas d'utilisation : Méthodes de paiement ou algorithmes de tri.

Mise en œuvre :

class Singleton {
  private static instance: Singleton;

  private constructor() {}

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

  public showMessage(): void {
    console.log("Hello, Singleton!");
  }
}

// Usage
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();
console.log(singleton1 === singleton2); // true

À la fin,,,

Les modèles de conception sont des outils puissants pour créer des applications évolutives et maintenables. Le système de types robuste et la syntaxe moderne de TypeScript constituent une excellente plate-forme pour implémenter efficacement ces modèles. En comprenant et en appliquant ces modèles de conception, les développeurs peuvent créer des solutions logicielles bien architecturées qui résistent à l'épreuve du temps.
On se retrouve dans le prochain article, mon garçon !!!

---

Mon site personnel : https://shafayet.zya.me

---

Horrible configuration ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!