用 TypeScript 实现类型安全的 EventEmitter，这下不用怕写错事件名了

前端西瓜哥 2023-03-28 原文

大家好，我是前端西瓜哥。最近个人项目用 EventEmitter 模块越来越多了，因为类型不够安全，写起来要很小心。所以打算改良一下，实现 TypeScript 类型安全的 EventEmitter，解决事件名和函数类型不能做检验的问题。

Nodejs 的 EventEmitter 是一个发布订阅模块。

利用该类，我们可以实现事件的监听，被监听对象会在合适的时机触发事件，调用监听对象提供的方法，是模块间解耦的常用实现。

配合越来越流行的 TypeScript，我们可以通过安装 @types/node，我们能够进一步获得类型能力，减少低级错误的出现。但 EventEmitter 的类型实现并不出色，称不上是类型安全。

通常来说，不同事件对应的响应函数类型是不同的，但 @types/node 的 EventEmiiter 类型没有提供高级类型，而是给一个异常宽松的类型。

class EventEmitter {
  constructor(options?: EventEmitterOptions);
  // 类型过于宽泛
  on(eventName: string | symbol, listener: (...args: any[]) => void): this;
  emit(eventName: string | symbol, ...args: any[]): boolean;
}

可以看到，on 方法传入的事件名类型是 string | symbol，listener 则是随意任何类型的一个函数即可。emit 传入的参数也是 any[]。

因为过于宽松的类型，如果事件名拼错了，TypeScript 并不会报错，当一个 eventEmitter 的事件类型变得非常多，我们就和裸写 JavaScript 没什么区别了。

自己动手，丰衣足食，我们不妨自己实现一个类型安全的 EventEmitter。

EventEmitter 实现

因为我其实是在前端用的 EventEmitter，所以写了一个 EventEmitter 简易 JavaScript 实现。

class EventEmitter {
  eventMap = {};

  // 添加对应事件的监听函数
  on(eventName, listener) {
    if (!this.eventMap[eventName]) {
      this.eventMap[eventName] = [];
    }
    this.eventMap[eventName].push(listener);
    return this;
  }

  // 触发事件
  emit(eventName, ...args) {
    const listeners = this.eventMap[eventName];
    if (!listeners || listeners.length === 0) return false;
    listeners.forEach((listener) => {
      listener(...args);
    });
    return true;
  }

  // 取消对应事件的监听
  off(eventName, listener) {
    const listeners = this.eventMap[eventName];
    if (listeners && listeners.length > 0) {
      const index = listeners.indexOf(listener);
      if (index > -1) {
        listeners.splice(index, 1);
      }
    }
    return this;
  }
}

如果你是 nodejs，继承 EventEmitter 然后改它的类型或许是更好的做法，或者可以 “基于组合而不是继承” 的方式实现一个。

类型安全的 EventEmitter

接着是将上面的代码改为 TypeScript。

我们希望的效果是：

const ee = new EventEmitter<{
  update(newVal: string, prevVal: string): void;
  destroy(): void;
}>();
const handler = (newVal: string, prevVal: string) => {
  console.log(newVal, prevVal)
}
ee.on("update", handler);
ee.emit('update', '前端西瓜哥上班前的精神状态', '前端西瓜哥上班后的精神状态')
ee.off("update", handler);

// 以下报错
// 'number' is not assignable to parameter of type 'string'
ee.emit('update', 1, 2)
// (val: number) => void' is not assignable to parameter of type '() => void
ee.on('destroy', (val: number) => {})

EventEmitter 支持接受一个对象结构的 interface 作为类型参数，指定不同的 key 对应的函数类型。

然后我们再调用 on、emit、off 时，如果事件名、函数参数不匹配，编译就不能通过。

代码实现：

class EventEmitter<T extends Record<string | symbol, any>> {
  private eventMap: Record<keyof T, Array<(...args: any[]) => void>> =
    {} as any;

  // 添加对应事件的监听函数
  on<K extends keyof T>(eventName: K, listener: T[K]) {
    if (!this.eventMap[eventName]) {
      this.eventMap[eventName] = [];
    }
    this.eventMap[eventName].push(listener);
    return this;
  }

  // 触发事件
  emit<K extends keyof T>(eventName: K, ...args: Parameters<T[K]>) {
    const listeners = this.eventMap[eventName];
    if (!listeners || listeners.length === 0) return false;
    listeners.forEach((listener) => {
      listener(...args);
    });
    return true;
  }

  // 取消对应事件的监听
  off<K extends keyof T>(eventName: K, listener: T[K]) {
    const listeners = this.eventMap[eventName];
    if (listeners && listeners.length > 0) {
      const index = listeners.indexOf(listener);
      if (index > -1) {
        listeners.splice(index, 1);
      }
    }
    return this;
  }
}

读者朋友可自行拷贝上面两段代码到 TypeScript Playground 测试一下。

简单讲解一下。

首先是开头的类型参数。

class EventEmitter<T extends Record<string | symbol, any>> {
  //
}

这里的 extends 作用是限定类型范围，防止提供一个不符合规则的类型参数。

Record 是 TypeScript 自带的高级类型，根据传入的 key 和 value 创建一个对象结构（后面说到的 T 就是它）。

Record<string | symbol, any>
// 等价于
{
  [key: string | symbol]: any
}

value 本来的类型应该是 (...args: any[]) => void，好限制为函数。但在不是非字面量类型直传的情况下无法通过类型检测，只好改成 any 了。（坑爹的 Index signature for type 'string' is missing 报错）。

然后是 eventMap，它的实际内容是这样的：

eventMap = {
  event1: [ handler1, handler2 ],
  event2: [ handler3, handler4 ]
}

所以 key 需要为传入对象类型参数的 key。

函数则不用指定特定类型，因为它是私有的，无法被类外部访问，没有做过多的类型推断，就宽松一些，设置为任何函数类型。

private eventMap: Record<keyof T, Array<(...args: any[]) => void>> =
  {} as any;

这里我用了对象字面量，读者朋友也可以考虑用 Map 数据结构。

然后是 on 方法，首先 eventName 必须为 T 的 key 的其中之一，因为要推断 K 这么个内部类型变量，所以我们要在 on 后面加上 <K extends keyof T>，listener 就是对应的 T[K]。

on<K extends keyof T>(eventName: K, listener: T[K]): this

off 方法同理，不展开讲。

然后是 emit，第一个 eventName 用 keyof T 没问题，后面需要取出 handler 的参数，作为剩余参数。

emit<K extends keyof T>(eventName: K, ...args: Parameters<T[K]>): boolean

这里用了 TS 自带的 Parameters 高级类型，作用是取出函数的参数返回一个数组类型。

临时扩展自定义事件

如果要给一个已经固定了类型的实例，临时加一个事件，可以用 & 交叉类型扩展一下。

interface Events {
  update(newVal: string, prevVal: string): void;
  destroy(): void;
}
const ee = new EventEmitter<Events>();

// 用 & 扩展
const ee2 = ee as EventEmitter<
  Events & {
    customA(a: boolean): void;
  }
>;
// 不报错
ee2.emit('customA', true)

// 或者
(ee as EventEmitter<
  Events & {
    customA(a: boolean): void;
  }
>).emit('customA', true)

结尾

一番改造，我们充分利用 TypeScript 的强大类型体操能力，构建了一个类型安全的 EventEmitter。写错事件名，函数类型没对上什么的，根本不在怕的。

这次的类型体操还算是比较简单的。如果再复杂一点，可读性就很差了。

TypeScript 的类型编程的语法真的很不美观，可读性差。如果你不是库作者，个人不建议过度使用类型体操，它像正则一样，很强大，但也很复杂。

错事 EventEmitter span style color 开发前端 $TypeScript Nodejs

有关用 TypeScript 实现类型安全的 EventEmitter，这下不用怕写错事件名了的更多相关文章

ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2
我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A
ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
ruby - 如何安全地删除文件？ - 2
在Ruby中是否有Gem或安全删除文件的方法？我想避免系统上可能不存在的外部程序。“安全删除”指的是覆盖文件内容。最佳答案如果您使用的是*nix，一个很好的方法是使用exec/open3/open4调用shred:`shred-fxuz#{filename}`http://www.gnu.org/s/coreutils/manual/html_node/shred-invocation.html检查这个类似的帖子:Writingafileshredderinpythonorruby?
ruby-on-rails - 标准化文件名的字符串，删除重音和特殊字符 - 2
我正在尝试找到一种方法来规范化字符串以将其作为文件名传递。到目前为止我有这个:my_string.mb_chars.normalize(:kd).gsub(/[^\x00-\x7F]/n,'').downcase.gsub(/[^a-z]/,'_')但第一个问题:-字符。我猜这个方法还有更多问题。我不控制名称，名称字符串可以有重音符、空格和特殊字符。我想删除所有这些，用相应的字母('é'=>'e')替换重音符号，并将其余的替换为'_'字符。名字是这样的:“Prélèvements-常规”“健康证”...我希望它们像一个没有空格/特殊字符的文件名:“prelevements_routin
华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2
华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o
基于C#实现简易绘图工具【100010177】 - 2
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2
MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO
【Java入门】使用Java实现文件夹的遍历 - 2
遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg
ruby - 用 YAML.load 解析 json 安全吗？ - 2
我正在使用ruby2.1.0我有一个json文件。例如:test.json{"item":[{"apple":1},{"banana":2}]}用YAML.load加载这个文件安全吗？YAML.load(File.read('test.json'))我正在尝试加载一个json或yaml格式的文件。最佳答案 YAML可以加载JSONYAML.load('{"something":"test","other":4}')=>{"something"=>"test","other"=>4}JSON将无法加载YAML。JSON.load("
ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2
通常，数组被实现为内存块，集合被实现为HashMap，有序集合被实现为跳跃列表。在Ruby中也是如此吗？我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况最佳答案数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为，并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而，大多数Rubyist对数组的性能特征有一些期望，这会迫使不符合它们的实现变得默默无闻，因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

用 TypeScript 实现类型安全的 EventEmitter，这下不用怕写错事件名了

EventEmitter 实现

类型安全的 EventEmitter

临时扩展自定义事件

结尾

有关用 TypeScript 实现类型安全的 EventEmitter，这下不用怕写错事件名了的更多相关文章

随机推荐