TypeScript Academy · Lektion

Event-Maps typisieren

Ordnen Sie Eventnamen ihren Payload-Typen zu.

Event-Maps typisieren 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.

Was ist eine Event-Map?

Eine Event-Map ist ein Interface, das jeden Ereignisnamen mit der Form seiner Payload verknüpft. Sie ist die einzige Quelle der Wahrheit für ein Ereignissystem.

interface Events {
  login: { userId: string };
  logout: void;
}
// "login" carries a payload; "logout" carries none.

Namen Payloads zuordnen

Jeder Eigenschaftsschlüssel ist ein Ereignisname, und sein Werttyp ist die Payload. Dadurch weiß das Typsystem genau, welche Daten jedes Ereignis erwartet.

interface Events {
  message: { text: string; from: string };
  typing: { userId: string };
}
const sample: Events["message"] = { text: "hi", from: "ada" };
console.log(sample.text, sample.from);

Events ohne Payload

Manche Events enthalten keine Daten. Modellieren Sie sie mit void (oder einem leeren Objekt), um anzuzeigen, dass nichts übergeben werden muss.

interface Events {
  open: void;
  close: void;
}
// Handlers for these receive no meaningful argument.
console.log("payloadless events use void");

Einen Ereignisnamen-Typ extrahieren

Verwenden Sie keyof, um aus der Map die Union aller gültigen Ereignisnamen zu ermitteln. Das ist nützlich, um Funktionsparameter einzuschränken.

interface Events {
  login: { userId: string };
  logout: void;
}
type EventName = keyof Events; // "login" | "logout"
const e: EventName = "login";
console.log(e);

Einen Payload-Typ nachschlagen

Greifen Sie über einen Ereignisnamen auf die Map zu, um den Payload-Typ dieses Ereignisses zu erhalten: Events["login"] ist { userId: string }.

interface Events {
  login: { userId: string };
  logout: void;
}
type LoginPayload = Events["login"]; // { userId: string }
const p: LoginPayload = { userId: "u1" };
console.log(p.userId);

Eine umfangreichere Event-Map

Reale Anwendungen haben viele Events. Jedes erhält an einer zentralen Stelle einen klaren Payload-Vertrag, sodass Produzenten und Konsumenten immer übereinstimmen.

interface Events {
  cartAdd: { productId: string; qty: number };
  cartRemove: { productId: string };
  checkout: { total: number };
}
const a: Events["cartAdd"] = { productId: "p1", qty: 2 };
console.log(a.productId, a.qty);

Payloads können Unions sein

Ein Payload-Typ kann selbst eine diskriminierte Union sein, sodass ein Event mehrere verwandte Formen übertragen kann.

interface Events {
  status:
    | { kind: "online" }
    | { kind: "offline"; since: number };
}
const s: Events["status"] = { kind: "offline", since: 100 };
console.log(s.kind);

Payload-Typen wiederverwenden

Sie können Payload-Typen separat definieren und in der Map referenzieren. Dadurch bleibt das Interface übersichtlich und die Formen können wiederverwendet werden.

type User = { id: string; name: string };
interface Events {
  userCreated: User;
  userDeleted: { id: string };
}
const u: Events["userCreated"] = { id: "1", name: "Ada" };
console.log(u.name);

Warum eine Map besser ist als lose Zeichenketten

Ohne eine Map sind Ereignisnamen bloße Zeichenketten und Payloads any. Die Map bietet Autovervollständigung, Validierung und einen Vertrag.

// Loose: emit("login", { usrId: "x" }) typo unnoticed, payload any
// Mapped: the interface forces the correct name and payload shape.
console.log("the map is the contract");

Die Map bestimmt die API

In den nächsten Lektionen werden emit und on über die Event-Map generisch typisiert. Mithilfe von keyof und indiziertem Zugriff bleiben sie typsicher.

interface Events {
  login: { userId: string };
  logout: void;
}
type Name = keyof Events;
type PayloadOf<K extends Name> = Events[K];
const id: PayloadOf<"login"> = { userId: "u" };
console.log(id.userId);

Eine einzige Quelle der Wahrheit

Da alles aus der Event-Map abgeleitet wird, aktualisiert eine Änderung an einer Payload-Stelle jedes emit und jeden Handler, der sie verwendet.

interface Events {
  ping: { at: number };
}
const p: Events["ping"] = { at: Date.now() };
console.log(typeof p.at);

Schnelltest: Event-Maps

Testen Sie Ihr Verständnis der Typisierung von Event-Maps.

Zusammenfassung: Event-Maps typisieren

Sie haben gelernt, Events als ein Interface zu modellieren, das Namen Payloads zuordnet: void für Events ohne Payload, keyof für Namen und indizierter Zugriff für Payload-Typen bilden die Grundlage eines typsicheren Ereignissystems.

interface Events { login: { userId: string }; logout: void }
type Name = keyof Events;
const n: Name = "logout";
console.log(n);

Häufig gestellte Fragen

Ist die Lektion „Event-Maps typisieren“ kostenlos?

Ja — der vollständige Text von „Event-Maps typisieren“ 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 „Event-Maps typisieren“?

Ordnen Sie Eventnamen ihren Payload-Typen zu. 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 „Event-Maps typisieren“?

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