How to define a TypeScript type with a variable number of generics

Question

I'm attempting to make an emit function that can accept multiple arguments. Furthermore, the 2nd argument and beyond will be validated by TypeScript based on the 1st argument (the event).

I have the code below as a starting point, but it obviously doesn't work as intended.

type CallbackFunc<T extends any[]> = (...args: T) => void;
interface TrackablePlayerEventMap {
    'play:other': CallbackFunc<['audio' | 'video']>;
    error: CallbackFunc<[Error, Record<string, unknown>]>;
}

const eventHandlers: Partial<TrackablePlayerEventMap> = {};

function on<K extends keyof TrackablePlayerEventMap>(event: K, callback: TrackablePlayerEventMap[K]) {
}

function emit<K extends keyof TrackablePlayerEventMap>(event: K, ...args: TrackablePlayerEventMap[K]) {
    const handler = eventHandlers[event];

    handler(...args);
}

on('error', (e, metadata) => {
    console.log(e, metadata)
});
on('play:other', x => {
    console.log(x);
});

// This should be valid
emit('error', new Error('Ouch'), { count: 5 });

// This should be invalid
emit('error', 123, 456);

It's not 100% clear what your main question is. I presume it's "how can I write this" and not "why is my version not working"? So my answer will focus on the former and not the latter ... and can we forget on() entirely? Seems irrelevant to the question — jcalz
– jcalz, Commented Jul 21, 2022 at 16:10

jcalz · Accepted Answer · 2022-07-21 16:20:13Z

1

In order to write handler(...args) once inside the body of emit() and have it compile with no errors, you need to make use of the technique introduced in microsoft/TypeScript#47109 as a fix for an issue I've called "correlated unions", as mentioned in microsoft/TypeScript#30581.

The first step is to come up with a type that maps your event values to the parameters list (the args array). It's like your TrackablePlayerEventMap type, but the properties are just parameter tuple types and not function types:

interface TPEventParamsMap {
    'play:other': ['audio' | 'video'],
    error: [Error, Record<string, unknown>];
}

Then we give eventHandlers type a type written explicitly in terms of TPEventParamsMap:

const eventHandlers: {
    [K in keyof TPEventParamsMap]?: CallbackFunc<TPEventParamsMap[K]>
} = {};

Conceptually that's the exact same as your Partial<TrackablePlayerEventMap> type, but this one is explicitly written as a mapped type on TPEventParamsMap, which the compiler can use to keep track of the correlation between the event type (of type K) and the parameters to the event handler function (of type TPEventParamsMap[K]).

Continuing:

function emit<K extends keyof TPEventParamsMap>(
    event: K,
    ...args: TPEventParamsMap[K]
) {
    const handler = eventHandlers[event];
    handler?.(...args); // okay
}

That compiles with no error. Note that since eventHandlers is Partial it might not have a value at key event, so we are using the optional chaining operator (?.) to call the function only if it exists.

And emit() behaves as desired from the caller's side too:

emit('error', new Error('Ouch'), { count: 5 }); // okay
emit('error', 123, 456); // error, 123 is not an Error

Playground link to code

answered Jul 21, 2022 at 16:20

jcalz

339k29 gold badges452 silver badges449 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ffxsam Over a year ago

Excellent answer, thank you so much! Now that I'm looking at the code, it seems obvious, but with TypeScript I'm often not breaking things down enough into smaller parts like you have.

ffxsam Over a year ago

Just one more thing: If I add eventHandlers[event] = callback; into the on() function, I get a type error. I'm not really sure how to address that one.

jcalz Over a year ago

To lead the compiler through that you need to write eventHandlers's type as a distributive object type and then upcast it. Something like this. I assume this is out of scope of the original question as asked and if you want more explanation you should ask a new question (which I might or might not get to)

ffxsam Over a year ago

That helps, thanks! That's where TS reaches a level of complexity that's way beyond me, and I usually just slap a @ts-ignore on it and call it a day.

Collectives™ on Stack Overflow

How to define a TypeScript type with a variable number of generics

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related