TypeScript 怎么实现类型安全的事件发布订阅？

Question

仓乃文 · Accepted Answer

普通 EventEmitter 的 on/emit 用字符串事件名，参数类型无法校验，拼写错误或参数不匹配不会报错。利用映射类型和泛型约束，可以让事件名和回调参数类型一一对应，编译时就能发现错误。定义事件映射： ```typescript interface EventMap { login: { userId: string; timestamp: number }; logout: { userId: string }; error: { code: number; message: string }; } ``` 类型安全的 EventEmitter： ```typescript class TypedEmitter> { private listeners = new Map>(); on( event: K, callback: (payload: Events[K]) => void ): void { if (!this.listeners.has(event)) { this.listeners.set(event, new Set()); } this.listeners.get(event)!.add(callback); } emit(event: K, payload: Events[K]): void { this.listeners.get(event)?.forEach(fn => fn(payload)); } } ``` 使用： ```typescript const emitter = new TypedEmitter(); emitter.on("login", (e) => { console.log(e.userId); // OK：自动推导 }); emitter.emit("error", { code: 500, message: "fail" }); // OK emitter.emit("error", { code: "500" }); // 报错：code 应为 number ``` 补充说明： - 事件映射用 interface 定义，键是事件名，值是回调参数类型 - keyof Events 约束事件名，Events[K] 约束参数类型 - 适合组件通信、全局状态、WebSocket 消息等场景 - 可以扩展支持 off、once 等方法 - 与 Node.js EventEmitter 不同，编译时就能发现类型错误