Missing definition from union type when triggered from JSX tag name

[jonlepage]

Bug Report

This is a sample code for have a clean issue.

import React from 'react';
class A {
    Renderer = RendererA;
}
class B {
    Renderer = RendererB;
}

const RendererA = () => {
    return <div> A </div>;
};

const RendererB = () => {
    return <div> B </div>;
};

const TestRendererTypes = () => {
    const AB: A | B = null; // just for the demo, AB can be A or B !

    AB.Renderer; //🟩 okey cool,ts find all refs !
    const LostRef = <AB.Renderer />; //🟥 not cool ,ts seem remove refs !
    return LostRef;
};

playground

---

🙁 Actual behavior

Ts decode only one reference to a function jsx when using inside tag </> It should show both Renderer ref here !

🙂 Expected behavior

We should get all refs like that's . (working if use only a variable ref without a jsx tag <></> )

---

The example is basic, but inside my project i losing all refs, and this is a issu if i need fast track where a rendering is pointing ! And also will give incorrect props Intelisence ! Example here is missing all my others plugins ! But if i add a direct ref like that's , i can get all refs, but is polluting my code

It seem that's TS have some difficulty to understand JSX !
Is there a hacky and (clean way) to fix this ? or tell me if you guys have temp solutions ? I hope i exposed correctly my issue !

thanks @+

---

TSC: Version 4.2.3 Version : 1.55.0 (user setup) Commit : c185983a683d14c396952dd432459097bc7f757f Date : 2021-03-30T16:01:55.261Z Electron : 11.3.0 Chrome : 87.0.4280.141 Node.js : 12.18.3 V8 : 8.7.220.31-electron.0 OS : Windows_NT x64 10.0.19042

---

[andrewbranch]

Doesn’t repro for me. Can you share a project/repo?

[jonlepage]

Doesn’t repro for me. Can you share a project/repo?

hum wait ! , how did you get this work !! do you use a secret options or a kind of blackMagic ? It also not work in a ts playground , and i tried all versions and many advance settings ! Are you able to tell me if you have special settings or versions ? link to playground

[jonlepage]

Doesn’t repro for me. Can you share a project/repo?

okey sry i look the img too fast, (you have 4 ref)! but yes you get the same issue,, this is what i mean. I should get this . (photoshop edit)

[andrewbranch]

Oh, you’re talking about definitions, not references. That repros.

[jonlepage]

Oh, you’re talking about definitions, not references. That repros.

ho yes, i'm sorry for the confusion, i'm not always comfortable with english terminology. thanks for the information !

[andrewbranch]

No worries, TypeScript terminology is confusing even for most native English speakers 😄

[jonlepage]

i remake the issu, wihout JSX tag, because this issue also happen without react. playground

class A {
    Renderer = RendererA;
}
class B {
    Renderer = RendererB;
}

const RendererA = (prop:{instance?:A}) => {};
const RendererB = (prop:{instance?:B}) => {};

declare const Test:A|B;
// should accept instance A|B And Point to RendererA & RendererB, why only RendererA ?

Test.Renderer({instance:Test}); 

i hope i can have more explanation !