Typescript + React：bitwise & and Props

Question

我很难想象我脑海中发生的事情。如果我的道具包含由 HOC 注入的道具，那么我会收到错误，因为我在调用组件时没有包含该道具(而且它不是可选的(

interface Props {
name: string;
HOCProp: string;
}
const Component = ({ name, HOCProp }: Props) => <div>{name}</div> 
export default HOC(Component)

如果我在没有 HOCProp 的情况下在另一个文件中调用此组件，则会出现错误，因为我没有包含 HOC 注入的道具。

<Component name="hello" />

这会产生错误，因为HOCProp不存在，即使它实际上存在于组件中，因为 HOC 将其提供给了组件。

但是，如果我包含按位&，那么它会按预期工作。

interface Props {
name: string;
}
const Component = ({ name, HOCProp }: Props & HOCPropType) => <div>{name}</div> 
export default HOC(Component)

按位|似乎更有可能按预期工作，但它不是使用的。打字稿编译器如何解释这一点并看到它不是错误？

Answer 1

交集完全有效：

https://www.typescriptlang.org/docs/handbook/advanced-types.html

您的代码在联合中将这些类型"添加"在一起，从而创建一个同时包含Props和HOCPropType成员的单个类型。没有理由会是错误。