TypeScript Academy · Lektion

Grundlagen des Builder-Patterns

Konstruieren Sie komplexe Objekte Schritt für Schritt.

Grundlagen des Builder-Patterns ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum ein Builder?

Manche Objekte benötigen viele Felder. Sie mit einem riesigen Konstruktor voller positionsabhängiger Argumente zu erstellen, ist fehleranfällig. Das Builder-Pattern erstellt ein komplexes Objekt Schritt für Schritt, mit jeweils einem benannten Aufruf.

Das gewünschte Objekt

Stellen Sie sich eine HTTP-Anfrage mit einer URL, einer Methode, Headern und einem Body vor. All diese Werte an einen einzigen Konstruktor zu übergeben, ist schwer lesbar. Mit einem Builder können Sie jeden Bestandteil über eine eindeutig benannte Methode festlegen.

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

Eine einfache Builder-Klasse

Der Builder verwaltet intern einen unvollständigen Zustand und stellt Setter-Methoden bereit. Jeder Setter verändert den internen Zustand und ist für ein Feld zuständig.

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

Methodenverkettung gibt this zurück

Der entscheidende Trick für eine flüssig lesbare Builder-Syntax besteht darin, dass jeder Setter this zurückgibt. Da jede Methode denselben Builder zurückgibt, können Sie die Aufrufe miteinander verketten.

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

Weitere Schritte hinzufügen

Jeder Konfigurationsschritt folgt demselben Muster: Speichern Sie den Wert und geben Sie anschließend this zurück. Beachten Sie, dass der Rückgabetyp this den konkreten Builder-Typ in der gesamten Kette beibehält.

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

Die build()-Methode

Zum Schluss setzt eine build()-Methode den gesammelten Zustand zum fertigen Objekt zusammen. Dies ist die einzige Methode, die nicht den Builder zurückgibt.

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

Den Builder verwenden

Die Erstellung liest sich nun wie ein Satz. Jeder Schritt ist benannt, die Reihenfolge ist flexibel, und Sie müssen niemals positionsabhängige Argumente verwalten.

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

Ein vollständiges ausführbares Beispiel

Hier ist eine eigenständige Version, die Sie ausführen können. Der Builder sammelt den Zustand, und build() erzeugt das endgültige, unveränderlich wirkende Objekt.

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);

Standardwerte inklusive

Da der Builder Felder mit sinnvollen Standardwerten initialisiert, müssen Aufrufer nur die benötigten Werte überschreiben. Nicht gesetzte Schritte behalten einfach ihre Standardwerte.

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

Lesbarkeit im Vergleich zu Konstruktoren

Vergleichen Sie new Req("/x", "POST", {}, undefined) mit dem verketteten Builder. Die Builder-Variante dokumentiert die Absicht bei jedem Schritt und vermeidet rätselhafte undefined-Platzhalter.

Wann Sie ihn einsetzen sollten

Verwenden Sie einen Builder, wenn ein Objekt viele optionale Bestandteile hat, die Erstellung in mehreren Schritten erfolgt oder Sie eine gut lesbare, selbstdokumentierende API wünschen. Bei zwei oder drei Feldern ist ein einfaches Objektliteral übersichtlicher.

Kurztest

Kurzer Test zu dieser Lektion.

Zusammenfassung

Ein Builder erstellt komplexe Objekte Schritt für Schritt. Setter speichern jeweils ein Feld und geben this zurück, um Verkettungen zu ermöglichen, während build() das endgültige Objekt zusammensetzt. Builder spielen ihre Stärken aus, wenn Objekte viele optionale Bestandteile haben.

Häufig gestellte Fragen

Ist die Lektion „Grundlagen des Builder-Patterns“ kostenlos?

Ja — der vollständige Text von „Grundlagen des Builder-Patterns“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Grundlagen des Builder-Patterns“?

Konstruieren Sie komplexe Objekte Schritt für Schritt. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Grundlagen des Builder-Patterns“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu TypeScript Academy