在扩展 EventEmitter 的 TypeScript 类中声明事件

Question

我有一个扩展EventEmitter 的类，它可以发出事件hello。如何使用特定的事件名称和侦听器签名声明 on 方法？

class MyClass extends events.EventEmitter {

  emitHello(name: string): void {
    this.emit('hello', name);
  }

  // compile error on below line
  on(event: 'hello', listener: (name: string) => void): this;
}

Answer 1

最有用的方法是使用declare：

declare interface MyClass {
    on(event: 'hello', listener: (name: string) => void): this;
    on(event: string, listener: Function): this;
}

class MyClass extends events.EventEmitter {
    emitHello(name: string): void {
        this.emit('hello', name);
    }
}

请注意，如果您要导出您的类，接口和类都必须使用export 关键字声明。

Answer 2

这是我能够弄清楚的。用泛型覆盖默认函数！

interface IEmissions {
  connect: () => void
  test: (property: string) => void
}

class MyClass extends events.EventEmitter {
  private _untypedOn = this.on
  private _untypedEmit = this.emit
  public on = <K extends keyof IEmissions>(event: K, listener: IEmissions[K]): this => this._untypedOn(event, listener)
  public emit = <K extends keyof IEmissions>(event: K, ...args: Parameters<IEmissions[K]>): boolean => this._untypedEmit(event, ...args)

  this.emit('test', 'Testing') // This will be typed for you!
}

// Example:
const inst = new MyClass()
inst.on('test', info => console.log(info)) // This will be typed!

Answer 3

您可以为此使用typed event emitter package。

例如：

import { EventEmitter } from 'tsee';

const events = new EventEmitter<{
    foo: (a: number, b: string) => void,
}>();

// foo's arguments is fully type checked
events.emit('foo', 123, 'hello world');

这个包还提供接口和一些实用程序。

Answer 4

为了扩展@SergeyK 的答案，您可以在不重复事件类型的情况下对emit 和on 函数进行类型检查和完成。

1. 为每种事件类型定义事件侦听器签名：

interface MyClassEvents {
  'add': (el: string, wasNew: boolean) => void;
  'delete': (changedCount: number) => void;
}

1. 根据 EventListeners (MyClassEvents) 函数签名声明构造 MyClass 类型的接口：

declare interface MyClass {
  on<U extends keyof MyClassEvents>(
    event: U, listener: MyClassEvents[U]
  ): this;

  emit<U extends keyof MyClassEvents>(
    event: U, ...args: Parameters<MyClassEvents[U]>
  ): boolean;
}

1. 只需定义扩展EventEmitter的类：

class MyClass extends EventEmitter {
  constructor() {
    super();
  }
}

---

现在您将对on 和emit 函数进行类型检查：

不幸的是，您只能对这两个函数进行补全和类型检查（除非您在 MyClass 接口中定义了更多函数）。

要获得更通用的解决方案，您可以使用this package。 注意：它不会增加运行时开销。

import { TypedEmitter } from 'tiny-typed-emitter';

interface MyClassEvents {
  'add': (el: string, wasNew: boolean) => void;
  'delete': (changedCount: number) => void;
}

class MyClass extends TypedEmitter<MyClassEvents> {
  constructor() {
    super();
  }
}

Answer 5

将the official typing package 用于events library：

npm install events @types/events