TypeScript Academy · 课时

事件映射的类型标注

Q: 「事件映射的类型标注」这节课中我会学到什么？

将事件名称映射到对应的负载类型。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将事件名称映射到对应的负载类型。

第 1 / 4 课13 个步骤

事件映射的类型标注 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

什么是事件映射

事件映射是一种接口，将每个事件名称与其负载的形状关联起来。它是事件系统的唯一事实来源。

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

将名称映射到负载

每个属性键都是一个事件名称，其值类型就是负载。这样，类型系统就能准确知道每个事件需要哪些数据。

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

没有负载的事件

有些事件不携带数据。请使用 void（或空对象）对其建模，以表示无需传递任何内容。

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

提取事件名称类型

使用 keyof 从映射中获取所有有效事件名称组成的联合类型，这对于约束函数参数很有用。

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

查找负载类型

使用事件名称索引映射，即可获取该事件的负载类型：Events["login"] 是 { userId: string }。

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

更丰富的事件映射

实际应用通常包含许多事件。每个事件都在同一个位置拥有清晰的负载契约，因此生产者和使用者始终保持一致。

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);

负载可以是联合类型

负载类型本身可以是可辨识联合类型，从而让一个事件携带多种相关的结构。

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

复用负载类型

您可以分别定义负载类型，再在映射中引用它们，使接口保持整洁，并让这些结构可以复用。

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);

为什么映射优于松散字符串

没有映射时，事件名称只是普通字符串，负载则是 any。映射提供自动补全、验证和契约。

// 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");

映射驱动 API

在接下来的课程中，emit 和 on 将针对事件映射使用泛型，并通过 keyof 和索引访问保持类型安全。

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);

唯一事实来源

由于所有内容都源自事件映射，只需在一个位置修改负载，就会更新使用它的每个 emit 和处理函数。

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

快速检查：事件映射

请测试您对事件映射类型标注的理解。

在交互式课程中回答

回顾：事件映射类型标注

您学会了使用接口将事件名称映射到负载，使用 void 表示没有负载的事件，使用 keyof 获取名称，并通过索引访问获取负载类型。这是类型安全事件系统的基础。

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

免费开始

用 AI 导师学习 TypeScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 101
课程: 352

免费开始学习查看完整课程

常见问题解答

「事件映射的类型标注」课时是免费的吗？

是的 — 「事件映射的类型标注」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「事件映射的类型标注」这节课中我会学到什么？

将事件名称映射到对应的负载类型。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「事件映射的类型标注」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy