如何实现一个类型安全的Event Emitter?

答案是使用泛型和索引类型实现类型安全的 Event Emitter。通过定义 Events 接口明确事件名与参数类型,结合 TypedEmitter 泛型类约束 on、emit 方法的事件名和参数类型,确保编译时检查正确性,避免拼写错误或参数不匹配问题,提升代码健壮性。

如何实现一个类型安全的event emitter?

实现一个类型安全的 Event Emitter,核心是让事件名称和对应的回调函数参数类型在编译时就能被正确约束。使用 TypeScript 可以通过泛型和索引类型来做到这一点,避免运行时因拼错事件名或传错参数导致的问题。

定义事件类型映射

先为所有可能触发的事件建立一个接口,键是事件名,值是该事件回调函数的参数类型数组。

例如:

interface Events {  add: [number, number];  error: [Error];  message: [string, Date];}

这样,监听 add 事件的回调必须接收两个 number 类型参数,而 error 事件只接受一个 Error 对象。

实现类型安全的 Emitter 类

使用泛型约束事件名必须是 Events 的 key,并确保 on、emit 等方法的参数与事件定义匹配。

class TypedEmitter {  private events = new Map<keyof EventsMap, Array>();  on(event: K, listener: (...args: EventsMap[K]) => void) {    const listeners = this.events.get(event) || [];    listeners.push(listener);    this.events.set(event, listeners);  }  emit(event: K, ...args: EventsMap[K]) {    const listeners = this.events.get(event);    if (listeners) {      listeners.forEach(fn => fn(...args));    }  }  off(event: K, listener: (...args: EventsMap[K]) => void) {    const listeners = this.events.get(event);    if (listeners) {      const index = listeners.indexOf(listener);      if (index > -1) {        listeners.splice(index, 1);      }    }  }}

这个类的关键在于用 EventsMap[K] 获取对应事件的参数类型元组,从而让 TypeScript 校验传参是否正确。

使用示例

将具体事件类型传入泛型,即可获得完整的类型提示和错误检查。

const emitter = new TypedEmitter();emitter.on('add', (a, b) => {  console.log(a + b); // 正确:a 和 b 是 number});emitter.emit('add', 1, 2); // ✅ 类型安全// emitter.emit('add', '1', '2'); // ❌ 编译报错:类型不匹配emitter.on('error', (err) => {  console.error(err.message);});emitter.emit('error', new Error('Boom!')); // ✅ 正确

如果尝试监听一个不存在的事件名,TypeScript 也会立即报错。

基本上就这些。通过定义事件结构和合理使用泛型约束,就能在开发阶段捕获大多数事件相关的类型错误,提升代码健壮性。

以上就是如何实现一个类型安全的Event Emitter?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1523258.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 15:45:51
下一篇 2025年12月20日 15:46:05

相关推荐

发表回复

登录后才能评论
关注微信