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

Question

所以我有一个使用Create-React-App的Typescript项目，并且我使用Visual Studio Code作为编辑器。

Intellisense通常可以很好地工作，但是在这种情况下，它不能按预期工作。

如果我有一个界面：

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

如果我然后有一个反应成分，其道具是：

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

如果我然后在另一个组件中，在render方法中创建Component的实例，然后执行以下操作：

<Component type='B' />

如果我在组件中键入myPop并尝试分配一个对象或某些东西，它将提示您期望一个字符串，但我不会获得对“ myProp”属性的智能感知。 因此，它似乎确实可以识别道具，只是不会在智能感知的自动完成部分弹出。

有点烦人的是，在智能自动完成列表中，它在B的情况下不提供“ myProp”，在C的情况下不提供“ secondProp”。

有人提供任何想法吗？

Answer 1

这可能与TypeScript问题＃26004有关 。 随时提出新的TypeScript问题并引用该问题。