Polymorphism and refs types

[DaniGuardiola]

I'm having trouble correctly typing something.

Here's an ultra-minimal repro: https://codesandbox.io/s/mystifying-jennings-glrz5?file=/src/App.tsx

Basically, I want to dynamically set the element (as prop) based on some internal runtime state. I also need to pass it a ref. Because I cannot statically infer (to my best knowledge) what element it will be, I'm typing the ref as HTMLElement. This throws type errors because apparently it needs more specificity (HTMLElement not assignable to HTMLDivElement, etc).

Findings:

• If I only use as, it works.
• If I only use ref, it works.
• The conditional doesn't change the error (as="button" still throws an error)

What am I doing wrong here? I've tried many things, but none have worked so far. Thanks in advance for any help! 😄

[jjenzz]

This looks like it could be a bug as I would have expected you would be able to do the following which also doesn't work:

const ref = React.useRef<HTMLButtonElement | HTMLDivElement>(null);

It appears this should be possible so I'll raise an issue from this discussion for us to look into further.

EDIT: I've raised the issue here if you'd like to follow progress.

[DaniGuardiola]

Thanks :)