如何在 TypeScript 中使用具有派生参数类型的通用 args 变量调用 function？

Question

When calling a function n with arguments spread from a variable of type Parameters< n >, everything seems to be in order as you might expect. But it seems as though adding a layer of indirection throws a wrench in things, eg

    type EventSchema = {
      'performTask': (task: string, data: number) => void
    };  

    // Mapping keys of EventSchema to arrays of listener methods
    const listeners: {[p in keyof EventSchema]: EventSchema[p][]} = {
      'performTask': []
    };

    export function emitGlobalEvent<K extends keyof EventSchema>(event: K, ...args: Parameters<EventSchema[K]>) {
      listeners[event].forEach((listener) => {
        listener(...args); // Error: A spread argument must either have a tuple type or be passed to a rest parameter.
      });
    }

When changing the ...args type to explicitly be (task: string, data: number) => void , no error is thrown. It seems as though the compiler is able to infer the type correctly, and it is a tuple, so why would this error occur here?

Answer 1

In order to assure TS that it is safe to pass ...args to listener , I think it worth provide your function with listeners argument:

type EventSchema = {
    'performTask': (task: string, data: number) => void
};

// Mapping keys of EventSchema to arrays of listener methods
const listeners: { [p in keyof EventSchema]: EventSchema[p][] } = {
    'performTask': []
};


export function emitGlobalEvent<
    K extends keyof EventSchema,
    Listeners extends Record<K, Array<(...args: Parameters<EventSchema[K]>) => void>>
>(listeners: Listeners, event: K, ...args: Parameters<EventSchema[K]>) {
    listeners[event].forEach((listener) => {
        listener(...args); // no error
    });
}

emitGlobalEvent(listeners, 'performTask', 'task', 42)

Playground

Don't forget that you can curry it:

type EventSchema = {
    'performTask': (task: string, data: number) => void
};

// Mapping keys of EventSchema to arrays of listener methods
const listeners: { [p in keyof EventSchema]: EventSchema[p][] } = {
    'performTask': []
};

const withListeners = <
    K extends keyof EventSchema,
    Listeners extends Record<K, Array<(...args: Parameters<EventSchema[K]>) => void>>
>(listeners: Listeners,) =>
    (event: K, ...args: Parameters<EventSchema[K]>) =>
        listeners[event].forEach((listener) => listener(...args));

const emitGlobalEvent = withListeners(listeners)

emitGlobalEvent('performTask', 'task', 42)

Playground