Generic union type does not seem to properly handle recursivity and arrays

[ZRunner]

Bug Report

🔎 Search Terms

Generic union type, recursivity in unions, generic union with arrays, TS 2349

🕗 Version & Regression Information

• This is the behavior in every version I tried (nightly included), and I reviewed the FAQ for entries about it

⏯ Playground Link

Playground link with relevant code

💻 Code

interface A {
    id: string;
    items: A[];
    things: number[];
}
interface B {
    id: string;
    items: B[];
    things: string[];
} 

const foo = <T extends A | B>(root: T, id: string): T | undefined => {
    return root.items.find(v => v.id === id); // not working
}

const foo2 = <T extends A | B>(root: {id: string, items: T[]}, id: string): T | undefined => {
    return root.items.find(element => element.id === id); // working
}

const bar = <T extends A | B>(root: T): number => {
    let count = root.things.length;
    root.items.forEach(element => { // working
        count += bar(element);
    });
    return count;
}

🙁 Actual behavior

TypeScript raises an error when using the first .find, saying "This expression is not callable. Each member of the union type has signatures, but none of those signatures are compatible with each other."

🙂 Expected behavior

I would expect the .find method to properly work on the items list, even with an union type, like the two other functions work with no error.
There seems to be an issue with type unions that I can't understand.

[MartinJohns]

Duplicate of #44373. Used search terms: union find in:title