Typing Event Maps
Map event names to their payload types.
Typing Event Maps is a free TypeScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is an Event Map?
An event map is an interface that links each event name to the shape of its payload. It is the single source of truth for an event system.
interface Events {
login: { userId: string };
logout: void;
}
// "login" carries a payload; "logout" carries none.Mapping Names to Payloads
Each property key is an event name and its value type is the payload. This lets the type system know exactly what data each event expects.
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 With No Payload
Some events carry no data. Model them with void (or an empty object) to signal there is nothing to pass.
interface Events {
open: void;
close: void;
}
// Handlers for these receive no meaningful argument.
console.log("payloadless events use void");Extracting an Event Name Type
Use keyof to get the union of all valid event names from the map, useful for constraining function parameters.
interface Events {
login: { userId: string };
logout: void;
}
type EventName = keyof Events; // "login" | "logout"
const e: EventName = "login";
console.log(e);Looking Up a Payload Type
Index the map with an event name to get that event payload type: Events["login"] is { userId: string }.
interface Events {
login: { userId: string };
logout: void;
}
type LoginPayload = Events["login"]; // { userId: string }
const p: LoginPayload = { userId: "u1" };
console.log(p.userId);A Richer Event Map
Real apps have many events. Each gets a clear payload contract in one place, so producers and consumers always agree.
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 Can Be Unions
A payload type can itself be a discriminated union, letting one event carry several related shapes.
interface Events {
status:
| { kind: "online" }
| { kind: "offline"; since: number };
}
const s: Events["status"] = { kind: "offline", since: 100 };
console.log(s.kind);Reusing Payload Types
You can define payload types separately and reference them in the map, keeping the interface tidy and the shapes reusable.
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);Why a Map Beats Loose Strings
Without a map, event names are bare strings and payloads are any. The map gives autocomplete, validation, and a contract.
// 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");The Map Drives the API
In the next lessons, emit and on will be generic over the event map, using keyof and indexed access to stay type-safe.
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);One Source of Truth
Because everything derives from the event map, changing a payload in one place updates every emit and handler that uses it.
interface Events {
ping: { at: number };
}
const p: Events["ping"] = { at: Date.now() };
console.log(typeof p.at);Quick Check: Event Maps
Test your understanding of typing event maps.
Recap: Typing Event Maps
You learned to model events as an interface mapping names to payloads, using void for payloadless events, keyof for names, and indexed access for payload types, the foundation of a type-safe event system.
interface Events { login: { userId: string }; logout: void }
type Name = keyof Events;
const n: Name = "logout";
console.log(n);Frequently asked questions
Is the “Typing Event Maps” lesson free?
Yes — the full text of “Typing Event Maps” is free to read here on the web, and the TypeScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Typing Event Maps”?
Map event names to their payload types. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start TypeScript Academy?
No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Typing Event Maps” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this TypeScript Academy lesson?
Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.