受歧视的联合不适用于未定义的工会

Question

我有一个react组件，它有两个道具required和fallback，它的道具的类型定义如下:

type Props = 
| {
required? : true | undefined,
fallback : React.ReactNode
}
| {
required? : false,
fallback? : React.ReactNode
}

我的意图是使fallback需要，如果requiredprop是true或undefined，它适用于required = true，但不适用required = undefined。

<FancyComponent required={true} /> //typescript gives error for this, which is what I expect
<FancyComponent /> //here required is undefined but typescript does not gives any error.

Answer 1

在required之后的问号(?)意味着它是一个可选的道具，这意味着两个类型都匹配undefined的情况。在错误的情况下，您应该删除required后面的?s:

type Props = 
| {
required?: true,
fallback: React.ReactNode
}
| {
required: false,
fallback?: React.ReactNode
}