如何为严格类型的事件发射器使用相关联合类型

Question

I'm implementing a custom event emitter module, which requires the possible event names and payloads to be defined in a generic type parameter.

The usage looks like this:

interface MyEventPayloadMapping = {
  event1: string;
  event2: void;
}

const emitter = createEventEmitter<MyEventPayloadMapping>();
emitter.on('event1', (payload: string) => {});
emitter.on('event2', () => {});

The type definition of EventEmitter is the following:

type PayloadOneArg<T> = undefined extends T ? [T?] : [T]; 
type PayloadArgs<T> = T extends undefined ? [] : PayloadOneArg<T>; // allow zero, one optional or exactly one argument

type Listener<Arguments> = (...args: PayloadArgs<Arguments>) => void;

interface EventEmitter<T> {
    on<K extends keyof T>(eventName:K, listener: Listener<T[K]>): void;
}

Now I've encountered an issue when using multiple instances of EventEmitter which partially overlap with their event payload mapping.

interface PayloadA {
    readonly foo: number;
    readonly bar: string;
}

interface PayloadB {
    readonly foo: number;
    readonly baz: boolean;
}

type EmitterA = EventEmitter<PayloadA>;
type EmitterB = EventEmitter<PayloadB>;

interface ModuleA {
    readonly type: 'a';
    readonly on: EmitterA['on'];
}

interface ModuleB {
    readonly type: 'b';
    readonly on: EmitterB['on'];
}

function doStuff(mod: ModuleA | ModuleB): void {
    if (mod.type === 'a') {
      mod.on('foo', () => {}); // works
    } else {
      mod.on('foo', () => {}); // works
    }
    mod.on('foo', () => {}); // doesn’t work
}

This produces the error

This expression is not callable.
  Each member of the union type '(<K extends keyof PayloadA>(eventName: K, listener: Listener<PayloadA[K]>) => void) | (<K extends keyof PayloadB>(eventName: K, listener: Listener<PayloadB[K]>) => void)' has signatures, but none of those signatures are compatible with each other.

After creating issue at the typescript project it was pointed out that an approach to solve this has been implemented in this pull request . I have some troubles understanding the description of this pull request and applying the concept to my use-case.

My first attempt is the following:

type EventNameToListenerMap<T> = { [P in keyof T]: { name: P, listener: Listener<T[P]>} }

interface EventEmitter<T> {
    on<K extends keyof T>(eventName: EventNameToListenerMap<T>[K]['name'], listener: EventNameToListenerMap<T>[K]['listener']): void;
}

But I still get the same error. Here is a playground link.

So the question is, can someone explain the concept of the solution introduced by the typescript pull request? And maybe additionally provide some hints how it could be applied for my use-case?

Answer 1

The general approach to this sort of thing, as described in microsoft/TypeScript#47109 , is to make some simple mapping interface like

interface PayloadMap {
    a: PayloadA,
    b: PayloadB
}

and then represent your operation as a generic function over aa key type parameter K constrained to the keys of that mapping interface, and where the parameters to this function are represented as a distributive object type that is defined in terms of this mapping interface. Like this:

type Module<K extends keyof PayloadMap = keyof PayloadMap> = { [P in K]:
    { readonly type: P, readonly on: OnEventEmitter<PayloadMap[P]> }
}[K]

where I've defined OnEventEmitter as

interface OnEventEmitter<T> {
    <P extends keyof T>(
        eventName: P,
        listener: (...args: PayloadArgs<T[P]>) => void
    ): void;
}

The Module<K> type is a distributive object type because it is a mapped type into which we immediately index into . When K is "a" then you get your ModuleA type, and when K is "b" then you get your ModuleB type. And, importantly, the type Module by itself is therefore a union corresponding exactly to your original ModuleA | ModuleB ModuleA | ModuleB type.

Anyway, now you can write doStuff() and it compiles:

function doStuff<K extends keyof PayloadMap>(mod: Module<K>): void {
    mod.on('foo', (x) => { x.toFixed() }); // okay
}

And you can call it, even with a union of ModuleA and ModuleB input:

declare const moduleA: Module<"a">
declare const moduleB: Module<"b">
doStuff(Math.random() < 0.5 ? moduleA : moduleB);

---

The doStuff() implementation works because mod.on() is seen to be of a single generic function type <"foo">(eventName: "foo", listener: (...args: PayloadArgs<PayloadMap[K]["foo"]>) => void) => void . If doStuff() were not generic, or if Module<K> were expressed as some type that was opaque to the compiler (such as Extract<ModuleA | ModuleB, {type: K}> ), then you'd get compile errors trying to call mod.on() :

// Don't do this
type OpaqueModule<K extends keyof PayloadMap> =
    Extract<Module<"a"> | Module<"b">, { type: K }>

function doOpaqueStuff<K extends keyof PayloadMap>(mod: OpaqueModule<K>): void {
    mod.on('foo', (x) => { x.toFixed() }); // error
    // none of those signatures are compatible with each other
}

Playground link to code