TypeScript Academy · Lektion

Typsicheres emit und on

Erzwingen Sie korrekte Payloads beim Auslösen und Abonnieren von Events.

Typsicheres emit und on ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Eine typsichere emit-Signatur

Machen Sie emit über den Ereignisnamen K generisch. Der Payload-Parameter ist dann Events[K], sodass Name und Payload übereinstimmen müssen.

interface Events { login: { userId: string }; logout: void }
function emit<K extends keyof Events>(event: K, payload: Events[K]) {
  console.log("emit", event, JSON.stringify(payload));
}
emit("login", { userId: "u1" });

Die falsche Payload verursacht einen Kompilierfehler

Wenn die Payload nicht zum Ereignisnamen passt, weist TypeScript sie zurück. Die Generizität verknüpft die beiden Parameter.

interface Events { login: { userId: string } }
function emit<K extends keyof Events>(event: K, payload: Events[K]) {}
// emit("login", { id: "u1" }); // Error: id is not userId
emit("login", { userId: "u1" });
console.log("ok");

Unbekannte Ereignisnamen werden zurückgewiesen

Da K extends keyof Events gilt, können Sie kein Event auslösen, das nicht in der Map enthalten ist.

interface Events { login: { userId: string } }
function emit<K extends keyof Events>(event: K, payload: Events[K]) {}
// emit("signup", { userId: "x" }); // Error: "signup" not a key
emit("login", { userId: "x" });
console.log("only known events");

Typisierte Handler mit on

Die Methode on registriert einen Handler, dessen Argument genau Events[K] ist. Dadurch erhalten Handler korrekt typisierte Payloads.

interface Events { login: { userId: string }; logout: void }
function on<K extends keyof Events>(event: K, handler: (payload: Events[K]) => void) {
  console.log("subscribed to", event);
}
on("login", (p) => console.log(p.userId));

Das Handler-Argument wird abgeleitet

Sie müssen den Handler-Parameter nicht annotieren. TypeScript leitet ihn aus dem Ereignisnamen ab und bietet im gesamten Handler-Body vollständige Autovervollständigung.

interface Events { message: { text: string } }
function on<K extends keyof Events>(event: K, handler: (p: Events[K]) => void) {}
on("message", (p) => {
  // p is { text: string }
  console.log(p.text.toUpperCase());
});

Events ohne Payload verarbeiten

Bei void-Events nimmt der Handler einfach kein sinnvolles Argument entgegen. Sie können seinen Handler ohne Daten aufrufen.

interface Events { logout: void }
function on<K extends keyof Events>(event: K, handler: (p: Events[K]) => void) {}
on("logout", () => console.log("logged out"));

emit und on kombinieren

Zusammen bilden emit und on ein typisiertes Pub/Sub-System. Das Auslösen eines Events übermittelt eine korrekt typisierte Payload an seine Handler.

interface Events { ping: { at: number } }
type Handler<K extends keyof Events> = (p: Events[K]) => void;
const handlers: { ping: Handler<"ping">[] } = { ping: [] };
function on<K extends keyof Events>(e: K, h: Handler<K>) { handlers[e].push(h as Handler<"ping">); }
function emit<K extends keyof Events>(e: K, p: Events[K]) { handlers[e].forEach(h => h(p as Events["ping"])); }
on("ping", p => console.log("at", p.at));
emit("ping", { at: 5 });

Die Payload-Position einschränken

Die Generizität stellt sicher, dass das Payload-Argument gegen das ausgewählte Event geprüft wird. So werden Unstimmigkeiten an der Aufrufstelle erkannt und nicht erst tief in einem Handler.

interface Events { add: { x: number; y: number } }
function emit<K extends keyof Events>(e: K, p: Events[K]) {
  return e;
}
emit("add", { x: 1, y: 2 });
// emit("add", { x: 1 }); // Error: y missing
console.log("payload checked");

Autovervollständigung für Ereignisnamen

Da der erste Parameter keyof Events ist, vervollständigen Editoren während der Eingabe gültige Ereignisnamen automatisch.

interface Events { open: void; close: void }
function emit<K extends keyof Events>(e: K, p: Events[K]) {}
// Typing emit(" suggests "open" and "close"
emit("open", undefined as void);
console.log("autocompleted names");

Warum Generics hier unverzichtbar sind

Ohne ein Generic bräuchten Sie für jedes Event eine eigene Überladung. Eine generische Signatur skaliert automatisch auf beliebig viele Events.

interface Events { a: { x: number }; b: { y: string } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return p; }
console.log(emit("a", { x: 1 }), emit("b", { y: "hi" }));

Ein wiederverwendbares Muster

Das Muster emit<K>(event, payload) und on<K>(event, handler) bildet den Kern jedes typsicheren Emitters. Als Nächstes verpacken wir es in eine Klasse.

interface Events { tick: { n: number } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return e; }
function on<K extends keyof Events>(e: K, h: (p: Events[K]) => void) { return e; }
console.log(emit("tick", { n: 1 }), on("tick", p => p.n));

Schnelltest: Typisiertes emit und on

Testen Sie Ihr Verständnis von typsicherem emit und on.

Zusammenfassung: Typsicheres emit und on

Sie haben generische Signaturen für emit und on erstellt, bei denen die Payload Events[K] ist. Dadurch werden Ereignisnamen automatisch vervollständigt, falsche Payloads zu Kompilierfehlern und Handler-Argumente abgeleitet.

interface Events { login: { userId: string } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return e; }
console.log(emit("login", { userId: "u1" }));

Häufig gestellte Fragen

Ist die Lektion „Typsicheres emit und on“ kostenlos?

Ja — der vollständige Text von „Typsicheres emit und on“ 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 „Typsicheres emit und on“?

Erzwingen Sie korrekte Payloads beim Auslösen und Abonnieren von Events. 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 2 von 4.

Wie lange dauert die Lektion „Typsicheres emit und on“?

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