使用带有联合类型的打字稿在React组件上运行Visual Studio Code intellisense

Question

So i have a project in Typescript using Create-React-App and i am using Visual Studio Code as my editor.

Intellisense generally works perfectly fine, however in this one scenario it doesn't work as expected.

If i have an interface:

interface A { name: string }
interface B extends A { type: 'B'; myProp: string }
interface C extends A {type: 'C'; secondProp: string}

if i then have a react component whose props are:

const Component: React.SFC<B | C> = props => {}

If i then in another component create an instance of Component in the render method and do something like:

<Component type='B' />

i don't get intellisense for the property 'myProp', if i type myPop in the component and try to assign an object or something it will error saying expecting a string. So it does seem that it recognises the props, just wont popup on the autocomplete part of intellisense.

Just a bit annoying that it doesn't offer 'myProp' in case of B or 'secondProp' in case of C in the list of intellisens autocompletes.

Anyone offer any thoughts?

Answer 1

It's probably related to TypeScript issue #26004 . Feel free to file a new TypeScript issue and cite that one.