TypeScript Academy · Lektion

Unveränderliche Builder

Geben Sie für eine sicherere Komposition neue Builder-Instanzen zurück.

Unveränderliche Builder ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Veränderlichkeit vs. Unveränderlichkeit

Die bisherigen Builder verändern this und geben es zurück. Ein unveränderlicher Builder gibt stattdessen bei jedem Schritt eine neue Builder-Instanz zurück und verändert das Original nie. Das macht das Zusammensetzen sicherer.

Das Problem gemeinsamer Veränderung

Wenn zwei Teile Ihres Codes denselben veränderlichen Builder halten, wirkt sich ein Setter-Aufruf auf beide aus. Unveränderliche Builder vermeiden diese Überraschung durch Aliasing vollständig.

const base = makeMutableBuilder().url("/x");
// If base is shared, later .method() calls mutate everyone's copy.

Eine neue Instanz zurückgeben

Ein unveränderlicher Setter kopiert den aktuellen Zustand, fügt das neue Feld hinzu und erstellt einen frischen Builder. Das Original bleibt unverändert.

class IB<S> {
  constructor(private readonly d: Record<string, unknown> = {}) {}
  with<K extends string, V>(k: K, v: V): IB<S & Record<K, V>> {
    return new IB<S & Record<K, V>>({ ...this.d, [k]: v });
  }
}

Strukturelles Teilen mit Spread

Der Spread-Ausdruck { ...this.d, [k]: v } kopiert vorhandene Einträge und überschreibt einen Schlüssel. Unveränderte Werte werden per Referenz geteilt, sodass Kopien kostengünstig bleiben.

const a = new IB<{}>().with("url", "/x");
const c = a.with("method", "GET");
// a still only has url; c has url and method.

Originale werden nie verändert

Da jeder Schritt ein neues Objekt liefert, ist das Verzweigen von einem früheren Builder sicher. Sie können eine teilweise aufgebaute Basis an mehreren Stellen wiederverwenden.

const base = new IB<{}>().with("url", "/api");
const get = base.with("method", "GET");
const post = base.with("method", "POST");
console.log("base untouched; get and post diverge");

Interner schreibgeschützter Zustand

Die Kennzeichnung der internen Daten mit readonly dokumentiert die Absicht und verhindert versehentliche direkte Änderungen innerhalb der Klasse. Der einzige Weg weiter ist das Erstellen einer neuen Instanz.

class IB<S> {
  constructor(private readonly d: Readonly<Record<string, unknown>> = {}) {}
}

Typgeprüftes unveränderliches Erstellen

Der Zustandsparameter wird weiterhin durchgereicht, sodass wir build() wie zuvor absichern können – jetzt auf einer unveränderlichen Grundlage.

interface Out { url: string; method: string }
class IB<S> {
  constructor(private readonly d: Record<string, unknown> = {}) {}
  with<K extends string, V>(k: K, v: V): IB<S & Record<K, V>> {
    return new IB<S & Record<K, V>>({ ...this.d, [k]: v });
  }
  build(this: IB<{ url: string; method: string }>): Out { return this.d as Out; }
}
const out = new IB<{}>().with("url", "/u").with("method", "GET").build();
console.log(out.url);

Sichereres Zusammensetzen

Unveränderliche Builder lassen sich wie Werte zusammensetzen: Geben Sie einen weiter, leiten Sie neue ab und machen Sie sich nie Sorgen, dass ein nachgelagerter Aufruf den gemeinsam genutzten Zustand überschreibt. Das ist derselbe Vorteil, den unveränderliche Daten überall bieten.

Wiederverwendbare Voreinstellungen

Sie können einen häufig verwendeten Ausgangspunkt einmal speichern und viele Varianten daraus ableiten. Dank der Setter mit Copy-on-Write ist jede Variante unabhängig.

const jsonBase = new IB<{}>().with("header", "application/json");
const usersReq = jsonBase.with("url", "/users");
const ordersReq = jsonBase.with("url", "/orders");
console.log("two independent requests from one base");

Kostenaspekte

Bei jedem Schritt wird ein neues Objekt angelegt. Für den typischen Aufbau von Konfigurationen ist das vernachlässigbar, und strukturelles Teilen hält die Kopien flach. Nur extrem häufig ausgeführte Schleifen würden das bemerken.

Zusammenfassung: veränderlich vs. unveränderlich

Veränderliche Builder sind etwas schneller und einfacher; unveränderliche Builder lassen sich sicherer teilen und nachvollziehen. Bevorzugen Sie unveränderliche Builder, wenn sie weitergegeben oder als Voreinstellungen wiederverwendet werden.

Kurztest

Kurzer Test zu dieser Lektion.

Zusammenfassung

Ein unveränderlicher Builder gibt mithilfe des strukturellen Teilens durch { ...this.d, [k]: v } pro Schritt eine neue Instanz zurück und verändert this niemals. Die Originale bleiben erhalten, wodurch sicheres Zusammensetzen und wiederverwendbare Voreinstellungen möglich werden – bei nur geringfügigem Aufwand für neue Objekte.

Häufig gestellte Fragen

Ist die Lektion „Unveränderliche Builder“ kostenlos?

Ja — der vollständige Text von „Unveränderliche Builder“ 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 „Unveränderliche Builder“?

Geben Sie für eine sicherere Komposition neue Builder-Instanzen zurück. 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 4 von 4.

Wie lange dauert die Lektion „Unveränderliche Builder“?

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