Function not callable when using a generic type parameter and union types

[lo1tuma]

Bug Report

🔎 Search Terms

• This expression is not callable.
• TS2349
• generic
• union type

🕗 Version & Regression Information

Problem happens in all recent versions of typescript.

⏯ Playground Link

Playground link with relevant code

💻 Code

interface EventEmitter<Mapping> {
    on<EventName extends keyof Mapping>(eventName: EventName): void;
}

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
}

🙁 Actual behavior

The following error is reported when calling mod.on('foo'); without narrowing its exact type:

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

🙂 Expected behavior

Since mod.on('foo') works in all possible branches when narrowing down the type I would expect it to also work without branching and narrowing.

[jcalz]

Duplicate of #30581, recommended solution is at #47109

[lo1tuma]

@jcalz thanks for pointing that out. I have troubles understanding the recommended solution and applying it for my use-case. I’ve posted the question on stackoverflow.