TypeScript type error when using generic callbacks for different event types

I'm trying to make some kind of a generic event handler, I want to be able to specify the event key like "pointermove" and typescript to infer the event type in this case PointerEvent, but I get an error when using more than one event.

here's a minimal repoducible example

export type ContainedEvent< K extends keyof HTMLElementEventMap> = {
    eventName: K;
    callback: ContainedEventCallback< K>;
  
};
export type ContainedEventCallback< K extends keyof HTMLElementEventMap> = (
    event: HTMLElementEventMap[K],

) => void;
export default function useContainedMultiplePhaseEvent<
    K extends keyof HTMLElementEventMap = keyof HTMLElementEventMap
>(
    el: HTMLElement ,
    events: ContainedEvent<K>[],
) {
    
  for (const e of events) {
      el.addEventListener(e.eventName, (ev) => e.callback(ev));
  }     
}
const div = document.createElement("div");
 const doA: ContainedEventCallback<"pointerdown"> = (
        e,
    ) => {
      console.log("A")
    };
 const doB: ContainedEventCallback<"pointermove"> = (
        e,
    ) => {
      console.log("B")
    };

useContainedMultiplePhaseEvent(div,
        [
            {
                eventName: "pointerdown",
                callback: doA,
            },
            {
                eventName: "pointermove",
                callback: doB,
            }
        ]
    );

I think the primary issue here is that when TypeScript infers a generic element type from an array literal, it only consults the first element of the array. This is often what people want, since since it lets something like function foo<T>(...args: T[]) {} accept foo("a", "b", "c") and foo(1, 2, 3), but reject foo("a", 2, "c"). That is, when inferring T from a value of type T[], the compiler will only infer homogeneous arrays. But in your case you want to allow a hetereogenous array.

The normal approach in such cases is to change the generic type parameter so that it refers to the entire array and not just the element type of the array. In your case that would mean instead of having K refer to the type argument for ContainedEvent, you could make it refer to the tuple of type arguments for a tuple of ContainedEvents. Meaning K would be something like ["pointerdown", "pointermove"] and events would be of type [ContainedEvent<"pointerdown">, ContainedEvent<"pointermove">].

Like this:

function useContainedMultiplePhaseEvent<K extends readonly (keyof HTMLElementEventMap)[]>(
    el: HTMLElement, events: [...{ [I in keyof K]: ContainedEvent<K[I]> }],
) {
    for (const e of events) {
        el.addEventListener(e.eventName, (ev) => e.callback(ev));
    }
}

so the type of events is a mapped tuple type where each element of K at numeric-like index I, of type K[I], is wrapped with ContainedEvent to get ContainedEvent<K[I]>. Oh and the type of events is wrapped in a variadic tuple type [...⋯] to give the compiler a hint that we want events's type to be inferred as a tuple instead of an unordered array (this behavior is described in ms/TS#39094).

Let's try it out:

useContainedMultiplePhaseEvent(div, [
    { eventName: "pointerdown", callback: doA, },
    { eventName: "pointermove", callback: doB, }
]); // okay
// useContainedMultiplePhaseEvent<["pointerdown", "pointermove"]>

Looks good!

That answers the question as asked.

There are other possible approaches but I didn't want to stray too far from your original code. Since K in ContainedEvent<K> can only really be one of a fixed union keyof HTMLElementEventMap, you could actually make ContainedEvent into a union itself, possibly by changing the definition to a distributive object type as described in ms/TS#47109. Then your useContainedMultiplePhaseEvent function wouldn't need to be generic, since each element of events would just be of the union type ContainedEvent. That looks like this:

type ContainedEvent<K extends keyof HTMLElementEventMap = keyof HTMLElementEventMap> =
    { [P in K]: {
        eventName: P; callback: ContainedEventCallback<P>;
    } }[K];

function useContainedMultiplePhaseEvent(el: HTMLElement, events: ContainedEvent[]) {
    events.forEach(<K extends keyof HTMLElementEventMap>(e: ContainedEvent<K>) =>
        el.addEventListener(e.eventName, (ev) => e.callback(ev)));
}

which also works as desired. You can look at ms/TS#47109 to see how a distributive object type works; otherwise I won't digress here with a detailed explanation.

Playground link to code