文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用TypeScript实现一个类型安全的EventBus示例详解

2024-04-02 19:55

关注

前言

随着vue3的发布，TypeScript在国内越来越流行，学习TypeScript也随即变成了大势所趋。本文就通过实现一个类型安全的EventBus来练习TypeScript，希望对小伙伴们有所帮助。

准备工作

生成一个TypeScript的基础架子：

// 创建目录
mkdir ts-event-bus && cd ts-event-bus
// 初始化工程
yarn init -y
// 安装typescript
yarn add typescript -D
// 生成typescript配置文件
npx tsc --init

这样一来我们就搭建好了一个TypeScript的基础架子，为了方便我们后续的测试，我们需要下载ts-node,它可以让我们在不编译TypeScript代码的情况下运行TypeScript。

yarn add ts-node -D

目标

思路

每一个Event都可以注册多个处理函数，我们用一个Set来保存这些处理函数，再用一个Map来保存Event到对应Set的映射,如图所示:

具体实现

// 定义泛型函数类型
type Handler<T = any> = (val: T) => void;
class EventBus<Events extends Record<string, any>> {
  
  private map: Map<string, Set<Handler>> = new Map();
  on<EventName extends keyof Events>(
    name: EventName,
    handler: Handler<Events[EventName]>
  ) {
    let set: Set<Handler<Events[EventName]>> | undefined = this.map.get(
      name as string
    );
    if (!set) {
      set = new Set();
      this.map.set(name as string, set);
    }
    set.add(handler);
  }
}

这里我们分成逻辑和类型两方面来讲

逻辑方面，我们初始化了一个空的Map，然后当调用on 用来注册事件的时候，先去根据EventName来找有没有对应的Set，没有就创建一个，并且把事件添加到Set中，这一部分的代码相当简单，实现起来也没什么难度。

类型方面，我们将EventBus 定义为一个泛型类，并约束泛型为 Events extends Record<string, any>,这样就约束了传入的泛型参数必须是一个对象类型，例如：

type Events = {
    foo : number;
    bar : string;
}

我们可以通过这个类型来获取key对应value的类型

// number;
type ValueTypeOfFoo = Events['foo']

进而可以获取foo事件对应的handler函数的类型,即:

// (val:number) => void;
type HandlerOfFoo = Handler<Events['foo']>

我们又将on方法设置为泛型函数，同时约束EventName extends keyof Events，这样一来Events[EventName] 就是对应值的类型，Handler<Events[EventName]>就是处理函数的类型。通过这样的方式我们实现了一个类型安全的on方法。

接着我们编写一段代码测试一下

可以看到，我们在vscode中编写代码的时候，编辑器能给我们代码提示了。

我们键入handler函数，编辑器也会提醒我们val是一个string类型。

当我们传的参数不合法的时候，TypeScript也会给我们警告

接下来我们依葫芦画瓢实现emit函数。

class EventBus<Events extends Record<string, any>> {
 ... others code
  
  emit<EventName extends keyof Events>(
    name: EventName,
    value: Events[EventName]
  ) {
    const set: Set<Handler<Events[EventName]>> | undefined = this.map.get(
      name as string
    );
    if (!set) return;
    const copied = [...set];
    copied.forEach((fn) => fn(value));
  }
}

先找到EventName对应的Set，如果有就取出并依次执行。这里的逻辑也相当简单，我们编写代码测试一下

const bus = new EventBus<{
  foo: string;
  bar: number;
}>();

bus.on("foo", (val) => {
  console.log(val);
});

// 输出 hello
bus.emit("foo", "hello");

我们在终端运行npx ts-node ./index.ts,输出hello,说明我们的程序已经生效。

接下来我们实现取消订阅的功能。

{
  ...
  off<EventName extends keyof Events>(
    name?: EventName,
    handler?: Handler<Events[EventName]>
  ): void {
    // 什么都不传，则清除所有事件
    if (!name) {
      this.map.clear();
      return;
    }

    // 只传名字，则清除同名事件
    if (!handler) {
      this.map.delete(name as string);
      return;
    }

    // name 和 handler 都传了，则清除指定handler
    const handlers: Set<Handler<Events[EventName]>> | undefined = this.map.get(
      name as string
    );
    if (!handlers) {
      return;
    }
    handlers.delete(handler);
  }
}

取消订阅我们这样设计，它传入0至2个参数，什么都不传代表清除所有事件，只传一个参数代表清除同名事件，传两个参数代表只清除该事件指定的处理函数，所以它的两个参数都是可选的，实现的逻辑也非常简单，我们这里不多赘述。

我们编写一段测试代码看下效果

const bus = new EventBus<{
  foo: string;
  bar: number;
}>();

// 测试传2个参数的情况
const handlerFoo1 = (val: string) => {
  console.log("2个参数 handlerFoo1 => ", val);
};
bus.on("foo", handlerFoo1);
bus.emit("foo", "hello");
// 打印 2个参数 handlerFoo1 => hello
bus.off("foo", handlerFoo1);
bus.emit("foo", "hello");
// 什么都没打印

// 测试传1个参数的情况
const handlerFoo2 = (val: string) => {
  console.log("1个参数 handlerFoo2 => ", val);
};
const handlerFoo3 = (val: string) => {
  console.log("1个参数 handlerFoo3 => ", val);
};
bus.on("foo", handlerFoo2);
bus.on("foo", handlerFoo3);

bus.emit("foo", "hello");
// 打印 1个参数 handlerFoo2 => hello
// 打印 1个参数 handlerFoo3 => hello
bus.off("foo");
bus.emit("foo", "hello");
// 什么都没输出

// 测试传0个参数的情况
const handlerFoo4 = (val: string) => {
  console.log("0个参数 handlerFoo4 => ", val);
};
const handlerBar1 = (val: number) => {
  console.log("0个参数 handlerBar1 => ", val);
};
bus.on("foo", handlerFoo4);
bus.on("bar", handlerBar1);

bus.emit("foo", "hello");
bus.emit("bar", 123);
// 打印 1个参数 handlerFoo4 => hello
// 打印 1个参数 handlerBar1 => 123
bus.off();
bus.emit("foo", "hello");
bus.emit("bar", 123);
// 什么都没输出

从测试结果来看，我们的off方法功能也没问题，这样就完成了我们的EventBus。

此外，我们还可以给我们的方法加上注释，这样在我们鼠标移到api上方和我们输入参数的时候，编辑器就会有提示。

  
  on<EventName extends keyof Events>(
    name: EventName,
    handler: Handler<Events[EventName]>
  ) {
    let set: Set<Handler<Events[EventName]>> | undefined = this.map.get(
      name as string
    );
    if (!set) {
      set = new Set();
      this.map.set(name as string, set);
    }
    set.add(handler);
  }

可以看到，编辑器给我们提供了很好的提示，极大方便了我们的编码。

我们还可以用函数重载来改进我们的off方法,以获得更友好的提示

{
  
  off(): void;
  
  off<EventName extends keyof Events>(name: EventName): void;
  
  off<EventName extends keyof Events>(
    name: EventName,
    handler: Handler<Events[EventName]>
  ): void;
  off<EventName extends keyof Events>(
    name?: EventName,
    handler?: Handler<Events[EventName]>
  ): void {
    // 什么都不传，则清除所有事件
    if (!name) {
      this.map.clear();
      return;
    }

    // 只传名字，则清除同名事件
    if (!handler) {
      this.map.delete(name as string);
      return;
    }

    // name 和 handler 都传了，则清除指定handler
    const handlers: Set<Handler<Events[EventName]>> | undefined = this.map.get(
      name as string
    );
    if (!handlers) {
      return;
    }
    handlers.delete(handler);
  }
}

改造前的提示:

改造后的提示:

至此，我们就完成了一个功能完备，类型安全的EventBus了。

全部代码

type Handler<T = any> = (val: T) => void;

class EventBus<Events extends Record<string, any>> {
  private map: Map<string, Set<Handler>> = new Map();

  
  on<EventName extends keyof Events>(
    name: EventName,
    handler: Handler<Events[EventName]>
  ) {
    let set: Set<Handler<Events[EventName]>> | undefined = this.map.get(
      name as string
    );
    if (!set) {
      set = new Set();
      this.map.set(name as string, set);
    }
    set.add(handler);
  }

  
  emit<EventName extends keyof Events>(
    name: EventName,
    value: Events[EventName]
  ) {
    const set: Set<Handler<Events[EventName]>> | undefined = this.map.get(
      name as string
    );
    if (!set) return;
    const copied = [...set];
    copied.forEach((fn) => fn(value));
  }
  
  off(): void;
  
  off<EventName extends keyof Events>(name: EventName): void;
  
  off<EventName extends keyof Events>(
    name: EventName,
    handler: Handler<Events[EventName]>
  ): void;

  off<EventName extends keyof Events>(
    name?: EventName,
    handler?: Handler<Events[EventName]>
  ): void {
    // 什么都不传，则清除所有事件
    if (!name) {
      this.map.clear();
      return;
    }

    // 只传名字，则清除同名事件
    if (!handler) {
      this.map.delete(name as string);
      return;
    }

    // name 和 handler 都传了，则清除指定handler
    const handlers: Set<Handler<Events[EventName]>> | undefined = this.map.get(
      name as string
    );
    if (!handlers) {
      return;
    }
    handlers.delete(handler);
  }
}

const bus = new EventBus<{
  foo: string;
  bar: number;
}>();

// 测试传2个参数的情况
const handlerFoo1 = (val: string) => {
  console.log("2个参数 handlerFoo1 => ", val);
};
bus.on("foo", handlerFoo1);
bus.emit("foo", "hello");
// 打印 2个参数 handlerFoo1 => hello
bus.off("foo", handlerFoo1);
bus.emit("foo", "hello");
// 什么都没打印

// 测试传1个参数的情况
const handlerFoo2 = (val: string) => {
  console.log("1个参数 handlerFoo2 => ", val);
};
const handlerFoo3 = (val: string) => {
  console.log("1个参数 handlerFoo3 => ", val);
};
bus.on("foo", handlerFoo2);
bus.on("foo", handlerFoo3);

bus.emit("foo", "hello");
// 打印 1个参数 handlerFoo2 => hello
// 打印 1个参数 handlerFoo3 => hello
bus.off("foo");
bus.emit("foo", "hello");
// 什么都没输出

// 测试传0个参数的情况
const handlerFoo4 = (val: string) => {
  console.log("0个参数 handlerFoo4 => ", val);
};
const handlerBar1 = (val: number) => {
  console.log("0个参数 handlerBar1 => ", val);
};
bus.on("foo", handlerFoo4);
bus.on("bar", handlerBar1);

bus.emit("foo", "hello");
bus.emit("bar", 123);
// 打印 1个参数 handlerFoo4 => hello
// 打印 1个参数 handlerBar1 => 123
bus.off();
bus.emit("foo", "hello");
bus.emit("bar", 123);
// 什么都没输出

后记

EventBus是工作中常用的工具,本文用Typescript实现一个具备基础功能且类型安全的EventBus，是我近期学习Typescript的知识总结，希望小伙伴们有所帮助。

本文的代码已同步到GitHub上，喜欢的同学可以 clone 下来学习，如果喜欢那就点个?吧！

到此这篇关于用TypeScript实现一个类型安全的EventBus的文章就介绍到这了,更多相关TypeScript实现类型安全的EventBus内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

阅读原文内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     801人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     348人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     311人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     432人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     220人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

使用TypeScript实现一个类型安全的EventBus示例详解

前端开发2024-04-02

如何使用TypeScript实现一个类型安全的EventBus

前端开发2023-07-02

TypeScript的条件类型使用示例详解

前端开发2024-04-02

使用typescript+webpack构建一个js库的示例详解

前端开发2024-04-02

详解如何使用C++写一个线程安全的单例模式

前端开发2022-11-13

Java中的Unsafe在安全领域的使用总结和复现(实例详解)

前端开发2024-04-02
位置：首页-资讯-前端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯