实现 TypeScript 类型安全的 EventEmitter,这下不用怕写错事件名了
warning:
这篇文章距离上次修改已过286天,其中的内容可能已经有所变动。
// 定义一个事件映射对象,用于映射事件名称和处理函数的签名
interface Events {
newListener: (event: "newListener", listener: (event: string, listener: Function) => void) => void;
removeListener: (event: "removeListener", listener: (event: string, listener: Function) => void) => void;
// 可以继续添加更多事件和处理函数的签名
}
// 实现 TypeScript 类型安全的 EventEmitter
class TypedEventEmitter<E extends Events> {
private listeners: { [key in keyof E]: Function[] } = {} as any;
// 添加监听器
addListener<K extends keyof E>(event: K, listener: E[K]): this {
if (!this.listeners[event]) {
this.listeners[event] = [];
this.emit('newListener', event, (event, listener) => {
this.listeners[event].push(listener);
});
}
this.listeners[event].push(listener);
return this;
}
// 移除监听器
removeListener<K extends keyof E>(event: K, listener: E[K]): this {
if (this.listeners[event]) {
const filterListeners = (l: Function) => l !== listener;
this.listeners[event] = this.listeners[event].filter(filterListeners);
this.emit('removeListener', event, listener);
}
return this;
}
// 触发事件
emit<K extends keyof E>(event: K, ...args: Parameters<E[K]>): boolean {
if (this.listeners[event]) {
this.listeners[event].forEach(listener => listener(...args));
return true;
}
return false;
}
}
// 使用 EventEmitter
const emitter = new TypedEventEmitter<Events>();
emitter.addListener('newListener', (event, listener) => {
console.log(`新的监听器添加: 事件 - ${event}, 监听函数 - ${listener}`);
});
emitter.addListener('removeListener', (event, listener) => {
console.log(`监听器被移除: 事件 - ${event}, 监听函数 - ${listener}`);
});
const listener1 = (msg: string) => console.log(msg);
const listener2 = (msg: string) => console.log(msg);
emitter.addListener('event1', listener1);
emitter.removeListener('event1', listener1);
// 输出:
// 新的监听器添加: 事件 - newListener, 监听函数 - function (event, listener) {
// console.log(`新的监听器添加: 事件 - ${event}, 监听函数 - ${listener}`);
// }
// 新的监听器添加: 事件 - removeListener, 监听函数 - function (event, listener) {
// console.log(`监听器被移除: 事件 - ${event}, 监听函数 - ${listener}`);
// }
// 监听器被移除: 事件 - event1, 监听函数 - function (msg) {
// console.log(msg);
// }
这个代码实例定义了一个Events
接口,用于映射事件名称和处理函数的签名。然后,我们实现了一个泛型类TypedEventEmitter
,它接受一个泛型参数E
,这个参数必须符合Events
接口的结构。在TypedEventEmitter
中,我们实现了addListener
、removeListener
和\`e
评论已关闭