TypeScript Academy · Lektion

Zustandsautomaten modellieren

Repräsentieren Sie endliche Zustände mit diskriminierten Unions.

Zustandsautomaten modellieren 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.

Zustände als diskriminierte Union

Benutzeroberflächen und asynchrone Abläufe haben unterschiedliche Zustände: idle, loading, success und error. Wenn Sie diese als diskriminierte Union modellieren, enthält jeder Zustand genau die benötigten Daten.

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };

const s: State = { status: "idle" };
console.log(s.status);

Nutzdaten pro Zustand

Nur der Zustand success besitzt data, nur error besitzt message. idle und loading enthalten keine zusätzlichen Daten, wodurch verhindert wird, dass veraltete Daten zwischen Zuständen durchsickern.

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: number[] }
  | { status: "error"; message: string };

const ok: State = { status: "success", data: [1, 2, 3] };
console.log(ok.status, "data" in ok ? ok.data : null);

Jeden Zustand darstellen

Eine Funktion, die anhand von status eine Switch-Anweisung verwendet, kann für jeden Zustand die richtige Ausgabe erzeugen. Die Felder eines Mitglieds sind dabei nur dort verfügbar, wo sie existieren.

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };

function view(s: State): string {
  switch (s.status) {
    case "idle": return "Ready";
    case "loading": return "Loading...";
    case "success": return "Got: " + s.data;
    case "error": return "Failed: " + s.message;
  }
}
console.log(view({ status: "success", data: "users" }));

Übergänge definieren

Eine Zustandsmaschine wechselt über Übergänge zwischen Zuständen. Eine Übergangsfunktion übernimmt den aktuellen Zustand und ein Ereignis und gibt den nächsten Zustand zurück.

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };

function start(s: State): State {
  if (s.status === "idle") return { status: "loading" };
  return s;
}
console.log(start({ status: "idle" }).status);

Auch Ereignisse modellieren

Auch Ereignisse können als diskriminierte Union modelliert werden. Jeder Ereignistyp löst einen bestimmten Übergang aus.

type Event =
  | { type: "FETCH" }
  | { type: "RESOLVE"; data: string }
  | { type: "REJECT"; message: string };

const e: Event = { type: "RESOLVE", data: "ok" };
console.log(e.type);

Eine vollständige Übergangsfunktion

Kombinieren Sie Zustands- und Ereignis-Unions in einem Reducer. Wenn Sie auf beide umschalten, bleiben alle Übergänge explizit und typsicher.

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };
type Event =
  | { type: "FETCH" }
  | { type: "RESOLVE"; data: string }
  | { type: "REJECT"; message: string };

function reduce(s: State, e: Event): State {
  if (e.type === "FETCH") return { status: "loading" };
  if (e.type === "RESOLVE") return { status: "success", data: e.data };
  return { status: "error", message: e.message };
}
console.log(reduce({ status: "idle" }, { type: "FETCH" }).status);

Ungültige Zustände sind nicht darstellbar

Sie können nicht gleichzeitig data und eine error message besitzen. Das Union-Design verhindert widersprüchliche Zustände bereits durch seine Konstruktion.

type State =
  | { status: "success"; data: string }
  | { status: "error"; message: string };

// const bad: State = { status: "success", data: "x", message: "y" };
// Allowed extra props would be flagged in strict object checks.
console.log("no contradictory states");

Ungültige Übergänge abfangen

Sie können Ereignisse ignorieren, die für den aktuellen Zustand nicht gelten. So bleibt die Maschine in einem konsistenten Zustand, anstatt abzustürzen.

type State = { status: "idle" } | { status: "loading" };
type Event = { type: "FETCH" } | { type: "CANCEL" };

function reduce(s: State, e: Event): State {
  if (s.status === "loading" && e.type === "CANCEL") return { status: "idle" };
  if (s.status === "idle" && e.type === "FETCH") return { status: "loading" };
  return s; // ignore invalid combos
}
console.log(reduce({ status: "loading" }, { type: "CANCEL" }).status);

Vollständigkeit hinzufügen

Kombinieren Sie den Reducer mit assertNever, damit das Hinzufügen eines neuen Zustands oder Ereignisses jede zu aktualisierende Stelle sichtbar macht.

function assertNever(x: never): never { throw new Error("unhandled"); }
type State = { status: "idle" } | { status: "loading" } | { status: "done"; data: string };

function view(s: State): string {
  switch (s.status) {
    case "idle": return "idle";
    case "loading": return "loading";
    case "done": return s.data;
    default: return assertNever(s);
  }
}
console.log(view({ status: "done", data: "ok" }));

Anfangs- und Endzustände

Legen Sie einen eindeutigen Startzustand fest, häufig idle, sowie Endzustände wie success oder error. Dadurch dokumentieren Sie den Lebenszyklus der Maschine.

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };

const initial: State = { status: "idle" };
console.log("Start:", initial.status);

Eine vollständige kleine Zustandsmaschine

Hier sehen Sie den gesamten Ablauf: Start im Zustand idle, Abruf führt zu loading, und eine erfolgreiche Antwort führt zu success. Die Typen halten jeden Schritt korrekt.

type State = { status: "idle" } | { status: "loading" } | { status: "success"; data: string };
type Event = { type: "FETCH" } | { type: "RESOLVE"; data: string };

function reduce(s: State, e: Event): State {
  if (e.type === "FETCH") return { status: "loading" };
  return { status: "success", data: e.data };
}
let st: State = { status: "idle" };
st = reduce(st, { type: "FETCH" });
st = reduce(st, { type: "RESOLVE", data: "hi" });
console.log(st.status, st.status === "success" ? st.data : "");

Kurze Überprüfung: Zustandsmaschinen

Testen Sie Ihr Verständnis der Modellierung von Zustandsmaschinen.

Zusammenfassung: Zustandsmaschinen modellieren

Sie haben idle/loading/success/error als diskriminierte Union modelliert, typsichere Übergänge über Zustands- und Ereignis-Unions geschrieben und die Vollständigkeitsprüfung verwendet, damit die Maschine auch beim Wachsen korrekt bleibt.

type State = { status: "idle" } | { status: "loading" } | { status: "success"; data: string };
const s: State = { status: "success", data: "done" };
console.log(s.status === "success" ? s.data : "");

Häufig gestellte Fragen

Ist die Lektion „Zustandsautomaten modellieren“ kostenlos?

Ja — der vollständige Text von „Zustandsautomaten modellieren“ 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 „Zustandsautomaten modellieren“?

Repräsentieren Sie endliche Zustände mit diskriminierten Unions. 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 „Zustandsautomaten modellieren“?

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