如何在我的 TypeScript 类中创建强类型事件发射器？

Question

我正在尝试在我的 TypeScript 类中创建一个强类型事件发射器，但我遇到了一些麻烦。 我在以下代码中有 2 个错误：

type AudioEvents = {
    "start": (title: string) => void,
    "stop": () => void
}

export class Audio {
    private _listeners: {
        [E in keyof AudioEvents]: Array<AudioEvents[E]>
    } = {
        "start": [],
        "stop": []
    };

    on<E extends keyof AudioEvents>(event: E, listener: AudioEvents[E]) {
        this._listeners[event].push(listener);
    }

    private emit<E extends keyof AudioEvents>(event: E, ...args: Parameters<AudioEvents[E]>) {
        this._listeners[event].forEach(listener => {
            listener(args);
        });
    }
}

这是第一个错误：

Argument of type 'AudioEvents[E]' is not assignable to parameter of type '() => void'.
  Type '((title: string) => void) | (() => void)' is not assignable to type '() => void'.
    Type '(title: string) => void' is not assignable to type '() => void'.

            this._listeners[event].push(listener);

这是第二个：

Argument of type 'Parameters<AudioEvents[E]>' is not assignable to parameter of type 'string'.
  Type 'unknown[]' is not assignable to type 'string'.
    Type '[] | [title: string]' is not assignable to type 'string'.
      Type '[]' is not assignable to type 'string'.

                listener(args)

我不明白为什么会出现这些错误，但我认为这是做事件发射器的好方法，因为我的 IDE 喜欢它：

• emit method use
• on method use

我想实际上这两个错误是由于同一个误解造成的。 您有解决这些错误的想法吗？

Answer 1

不幸的是，Typescript 没有依赖类型。 见Suggestion for Dependent-Type-Like Functions: Conservative Narrowing of Generic Indexed Access Result Type #33014

所描述的问题是您的问题的一对一映射。

在你的情况下，我会为每个事件使用不同的函数：

type StartCallback = (title: string) => void;
type StopCallback = () => void;

export class Audio {
    private _startListeners: StartCallback[] = [];
    private _stopListeners: StopCallback[] = [];
    

    public onStart(listener: StartCallback) {
        this._startListeners.push(listener);
    }

    public onStop(listener: StopCallback) {
        this._stopListeners.push(listener);
    }

    private emitStart(title: string) {
        this._startListeners.forEach(listener => {
            listener(title);
        });
    }

    private emitStop() {
        this._stopListeners.forEach(listener => {
            listener();
        });
    }
}