Question

我在打字稿中有一个自定义的Event Emitter系统，但是我只能使用1个参数，有代码：

type EventMap = Record<string, any>;

type EventKey<T extends EventMap> = string & keyof T;
type EventReceiver<T> = (params: T) => void;

interface IEmitter<T extends EventMap> {
    on<K extends EventKey<T>>(eventName: K, fn: EventReceiver<T[K]>): void;
    
    off<K extends EventKey<T>>(eventName: K, fn: EventReceiver<T[K]>): void;
    
    emit<K extends EventKey<T>>(eventName: K, params: T[K]): void;
}


class EventHandler<T extends EventMap> implements IEmitter<T> {
    private emitter: EventEmitter = new EventEmitter();
    
    on<K extends EventKey<T>>(eventName: K, fn: EventReceiver<T[K]>): void {
        this.emitter.on(eventName, fn);
    }
    
    off<K extends EventKey<T>>(eventName: K, fn: EventReceiver<T[K]>): void {
        this.emitter.off(eventName, fn);
    }
    
    emit<K extends EventKey<T>>(eventName: K, params: T[K]): void {
        this.emitter.emit(eventName, params);
    }
}

const handler = new EventHandler<{
    foo: string,
    bar: number
    multiple: [ string, number ]
}>();

handler.emit('foo', 'baz');
handler.emit('multiple', 'aaa', 10);

handler.on('foo', (param) => console.log(param)); // baz
handler.on('multiple', (param) => console.log(param)); // [ 'aaa', 10 ] => This is not what I want

您可以看到multiple事件为on方法采用了一个参数，并且该参数是一个包含两个值的数组。
但是，我希望能够做到这一点：

handler.on('multiple', (aaa, ten) => console.log(`${aaa} , ${ten}`)); // aaa , 10

如何修改代码才能执行此操作？

Answer 1

因此，我的第一个倾向是将所有参数转换为元组类型的参数列表，因此类型为string的单个参数被写为[string]。可以对您的代码进行以下更改：

type EventMap = Record<string, any[]>;
type EventReceiver<T extends any[]> = (...params: T) => void;

interface IEmitter<T extends EventMap> {
    on<K extends EventKey<T>>(eventName: K, fn: EventReceiver<T[K]>): void;
    off<K extends EventKey<T>>(eventName: K, fn: EventReceiver<T[K]>): void;
    emit<K extends EventKey<T>>(eventName: K, ...params: T[K]): void; // note
}

您可以看到EventMap现在要求值的类型为any[]，并且EventReceiver和IEmitter.emit()都使用tuples in rest/spread positions来允许多个函数工作参数。您必须对EventHandler类进行一些更改以使其与之匹配：

class EventHandler<T extends EventMap> implements IEmitter<T> {
    private emitter: EventEmitter = new EventEmitter();

    on<K extends EventKey<T>>(eventName: K, fn: EventReceiver<T[K]>): void {
        this.emitter.on(eventName, fn as EventReceiver<any[]>);
    }

    off<K extends EventKey<T>>(eventName: K, fn: EventReceiver<T[K]>): void {
        this.emitter.off(eventName, fn as EventReceiver<any[]>);
    }

    emit<K extends EventKey<T>>(eventName: K, ...params: T[K]): void {
        this.emitter.emit(eventName, ...params);
    }
}

（此外：请注意，EventReceiver<T[K]>与(...args: any[])=>void不兼容，因此我使用了type assertion）

现在您应该可以按自己的方式调用事物了：

const handler = new EventHandler<{
    foo: [string],
    bar: [number],
    multiple: [string, number]
}>();

handler.emit('foo', 'baz');
handler.emit('multiple', 'aaa', 10);
handler.on('foo', (param) => console.log(param));
handler.on('multiple', (aaa, ten) => console.log(`${aaa} , ${ten}`));

这里的替代方法可能是使EventReceiver检查T是否为数组类型，如果是则将其散布，但这很笨拙，除非您需要它，否则我会谨慎尝试它。如果需要，它可能会使用类似的

type MaybeSpread<T> = T extends readonly any[] ? T : [T];
type EventReceiver<T> = (...params: MaybeSpread<T>) => void;

，然后...params: MaybeSpread<T[K]>。如果有必要，我已将其包含在下面的“游乐场”链接中。

如果关于这两种解决方案中的任何一种都不适合您，请详细说明...最好在代码中添加一些说明问题的方法。无论如何，希望对您有帮助并祝您好运！

Playground link to code

将类型数组转换为打字稿中的函数参数类型

1 个答案: