Typsäkra emit och on
Säkerställ korrekta nyttolaster vid sändning och lyssning.
Typsäkra emit och on är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.
En typsäker emit-signatur
Gör emit generisk med avseende på eventnamnet K. Payloadparametern blir då Events[K], så namn och payload måste överensstämma.
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" });Fel payload ger ett kompileringsfel
Om payloaden inte matchar eventnamnet avvisar TypeScript den. Generiken kopplar samman de två parametrarna.
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");Okända eventnamn avvisas
Eftersom K extends keyof Events kan du inte sända ett event som inte finns i kartan.
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");Typade handlers med on
Metoden on registrerar en handler vars argument är exakt Events[K], så handlers tar emot korrekt typade 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));Handlerargumentet härleds
Du behöver inte ange typen för handlerparametern. TypeScript härleder den från eventnamnet och ger fullständig autocompletion i handlerns brödtext.
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());
});Hantera event utan payload
För event med void tar handlern helt enkelt inget användbart argument. Du kan anropa handlern utan data.
interface Events { logout: void }
function on<K extends keyof Events>(event: K, handler: (p: Events[K]) => void) {}
on("logout", () => console.log("logged out"));Kombinera emit och on
Tillsammans bildar emit och on en typad pub/sub. När ett event sänds levereras en korrekt typad payload till dess handlers.
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 });Begränsa payloadens position
Generiken säkerställer att payloadargumentet kontrolleras mot det valda eventet, så att avvikelser upptäcks vid anropsplatsen i stället för djupt inne i en 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");Autocompletion för eventnamn
Eftersom den första parametern är keyof Events kompletterar redigerare giltiga eventnamn automatiskt medan du skriver anropet.
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");Varför generics är nödvändiga här
Utan en generik skulle du behöva överlagringar för varje event. En enda generisk signatur kan automatiskt skalas till valfritt antal event.
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" }));Ett återanvändbart mönster
Mönstret emit<K>(event, payload) och on<K>(event, handler) är kärnan i alla typsäkra emitters. I nästa steg paketerar vi det i en klass.
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));Snabbtest: Typade emit och on
Kontrollera din förståelse av typsäkra emit och on.
Sammanfattning: Typsäkra emit och on
Du byggde generiska signaturer för emit och on där payloaden är Events[K]. Därmed kompletteras eventnamn automatiskt, felaktiga payloads ger kompileringsfel och handlerargument härleds.
interface Events { login: { userId: string } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return e; }
console.log(emit("login", { userId: "u1" }));
Lär dig TypeScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 101
- Lektioner
- 352
Vanliga frågor
Är lektionen ”Typsäkra emit och on” gratis?
Ja – hela texten till ”Typsäkra emit och on” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Typsäkra emit och on”?
Säkerställ korrekta nyttolaster vid sändning och lyssning. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?
Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Typsäkra emit och on”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?
Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Typbestämning av händelsekartor
- Typsäkra emit och on
- Generisk event emitter-klass
- Inferens av lyssnarargument