如何使类型推断适用于具有泛型的元组（以基于数组的队列为例）？

Question

Imagine I have an interface for analytics object:

type Analytics = {
    identify: () => void;
    page: (title: string) => void;
    track: (eventName: string, props: object) => void;
}

And I want to implement some kind of queue that will collect all actions before we will be able to execute them. The queue looks as follows:

const queue = [
    ['identify'],
    ['page', 'some title'],
    ['track', 'event 1', { a: 'a' }],
    ['track', 'event 2', { b: 'b' }]
];

First item is always a method name ( identify , page , track ) and the rest are method arguments from Analytics type.

Interface for the queue that came into my mind:

type QueueItem<T extends keyof Analytics> = [T, ...Parameters<Analytics[T]>]

Ok, let's try it:

const item1: QueueItem = ['track', 'some event', {}]

As a result I get a Typescript error: Generic type 'QueueItem' requires 1 type argument(s) .

What about explicit generic type if it can't be inferred automatically?

const item2: QueueItem<keyof Analytics> = ['track'] // 👎 no error, although "track" method expects to receive two parameters
const item3: QueueItem<keyof Analytics> = ['track2'] // 👍 error as there is no such method in Analytics

Not working as expected. Typescript thinks that type of items is [keyof Analytics] | [keyof Analytics, string] | [keyof Analytics, string, object] [keyof Analytics] | [keyof Analytics, string] | [keyof Analytics, string, object] [keyof Analytics] | [keyof Analytics, string] | [keyof Analytics, string, object] and it allows different combinations of method names ( identify , page , track ) and arguments like ['identify', 'some string', {}] .

But will it work with a function? It will:

function func<T extends keyof Analytics>(method: T, ...args: Parameters<Analytics[T]>) {}

func('track') // 👍 error, because track has 2 parameters
func('track', 'event', {}) // 👍 no error
func('identify') // 👍 no error
func('page', 'title') // 👍 no error
func('page') // 👍 error as we need to pass title

What should be changed in QueueItem type to make it work as expected (the same way as with function)?

Typescript playground

Answer 1

Your problem is when T is a union , QueueItem<T> produces a tuple-of-unions, when what you want is a union-of-tuples. The tuple-of-unions allows mismatches between the method name and the parameter list.

In your generic function, the compiler can generally infer T to be a single key from Analytics and therefore the type Parameters<Analytics[T]> is exactly the type you expect. There are situations where even that generic function will infer T to be a union, though, and then the same problem comes up:

const method = (["identify", "page", "track"] as const)[
  Math.floor(Math.random() * 3)];
// const method: "identify" | "page" | "track"
func(method); // <-- no error, but there is a 67% chance of a problem at runtime

---

As I said, you'd really like QueueItem to be a union of tuples; you want to consider each key K in keyof Analytics separately, calculate QueueItem<K> for that key, and then unite all the results. In other words, you want to distribute QueueItem<K> across unions in K . One way to do this is with distributive conditional types :

type QueueItem =
    keyof Analytics extends infer K ? K extends keyof Analytics ?
    [K, ...Parameters<Analytics[K]>]
    : never : never
/* type QueueItem = ["identify"] | ["page", string] | ["track", string, object] */

Unfortunately, distributive conditional types really only distribute over "naked" type parameters, so the above plays tricks with conditional type inference to turn keyof Analytics into such a naked type parameter.

I prefer instead to use a mapped type over each key K in keyof Analytics and then index into it with keyof Analytics to get the desired union:

type QueueItem = {
    [K in keyof Analytics]: [K, ...Parameters<Analytics[K]>]
}[keyof Analytics]
/* type QueueItem = ["identify"] | ["page", string] | ["track", string, object] */

Either way works though.

---

You can verify that such a definition of QueueItem results in your desired behavior:

const item1: QueueItem = ['track', 'some event', {}] // okay
const item2: QueueItem = ['track'] // error
const item3: QueueItem = ['track2'] // error

Playground link to code