TypeScript Academy · Leçon

Principes du modèle Builder

Construire des objets complexes étape par étape.

Principes du modèle Builder est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Pourquoi utiliser un constructeur ?

Certains objets nécessitent de nombreux champs, et les construire avec un énorme constructeur rempli d’arguments positionnels est source d’erreurs. Le modèle de construction crée un objet complexe étape par étape, au moyen d’un appel nommé à la fois.

L’objet souhaité

Imaginez une requête HTTP avec les éléments url, méthode, headers et body. Transmettre tous ces éléments à un seul constructeur est difficile à lire. Un constructeur vous permet de définir chaque élément au moyen d’une méthode clairement nommée.

interface HttpRequest {
  url: string;
  method: string;
  headers: Record<string, string>;
  body?: string;
}

Une classe de constructeur simple

Le constructeur conserve un état partiel en interne et expose des méthodes d’affectation. Chaque méthode d’affectation modifie l’état interne et est responsable d’un champ.

class RequestBuilder {
  private url = "";
  private method = "GET";
  private headers: Record<string, string> = {};
  private body?: string;
}

L’enchaînement des méthodes retourne this

L’astuce qui rend les constructeurs agréables à lire consiste à retourner this depuis chaque méthode d’affectation. Comme chaque méthode retourne le même constructeur, vous pouvez enchaîner les appels.

class RequestBuilder {
  private url = "";
  setUrl(u: string): this {
    this.url = u;
    return this;
  }
}

Ajouter d’autres étapes

Chaque étape de configuration suit le même modèle : stocker la valeur, puis retourner this. Remarquez que le type de retour this conserve le type concret du constructeur tout au long de l’enchaînement.

  setMethod(m: string): this {
    this.method = m;
    return this;
  }
  addHeader(k: string, v: string): this {
    this.headers[k] = v;
    return this;
  }

La méthode build()

Enfin, une méthode build() assemble l’état accumulé pour créer l’objet terminé. C’est la seule méthode qui ne retourne pas le constructeur.

  build(): HttpRequest {
    return {
      url: this.url,
      method: this.method,
      headers: this.headers,
      body: this.body,
    };
  }

Utiliser le constructeur

La construction se lit maintenant comme une phrase. Chaque étape est nommée, l’ordre est flexible et vous n’avez jamais à gérer des arguments positionnels.

const req = new RequestBuilder()
  .setUrl("https://api.test")
  .setMethod("POST")
  .addHeader("Accept", "application/json")
  .build();
console.log(req.method);

Un exemple complet exécutable

Voici une version autonome que vous pouvez exécuter. Le constructeur accumule l’état et build() produit l’objet final à l’apparence immuable.

interface Req { url: string; method: string }
class B {
  private url = ""; private method = "GET";
  setUrl(u: string): this { this.url = u; return this; }
  setMethod(m: string): this { this.method = m; return this; }
  build(): Req { return { url: this.url, method: this.method }; }
}
const r = new B().setUrl("/users").setMethod("POST").build();
console.log(r.url, r.method);

Les valeurs par défaut sont automatiques

Comme le constructeur initialise les champs avec des valeurs par défaut judicieuses, les appelants ne remplacent que celles dont ils ont besoin. Les étapes non définies conservent simplement leurs valeurs par défaut.

const getReq = new B().setUrl("/health").build();
console.log(getReq.method); // GET (default)

Lisibilité et constructeurs

Comparez new Req("/x", "POST", {}, undefined) avec le constructeur utilisant l’enchaînement. La version avec constructeur explicite l’intention à chaque étape et évite les mystérieuses valeurs undefined de remplissage.

Quand l’utiliser

Utilisez un constructeur lorsqu’un objet comporte de nombreux éléments facultatifs, lorsque sa construction se fait par étapes ou lorsque vous souhaitez une API lisible qui se documente elle-même. Pour deux ou trois champs, un simple literal d’objet est plus simple.

Vérification rapide

Vérification rapide de cette leçon.

Récapitulatif

Un constructeur crée des objets complexes étape par étape. Les accesseurs enregistrent chacun un champ et renvoient this pour permettre l’enchaînement, tandis que build() assemble l’objet final. Les constructeurs sont particulièrement utiles lorsque les objets comportent de nombreuses parties facultatives.

Questions Fréquemment Posées

La leçon « Principes du modèle Builder » est-elle gratuite ?

Oui — le texte complet de « Principes du modèle Builder » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Principes du modèle Builder » ?

Construire des objets complexes étape par étape. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Principes du modèle Builder » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à TypeScript Academy