对于 React + TypeScript 变量：在组件的“props”中强制执行一些属性

Question

我想要一个变量（实际上是函数参数，但我简化了问题），它可以容纳必须具有的 React 组件，例如aNumber: number 在它的属性中。

我不成功的尝试是：

function MyComp(props: { aNumber: number, aString: string }) {
    return <>{props.aNumber} {props.aString}</>;
}

let f2: FunctionComponent<{ aNumber: number }> = MyComp;

给我错误：

Type '(props: { aNumber: number; aString: string; }) => Element' is not assignable to type 'FunctionComponent<{ aNumber: number; }>'.
  Types of parameters 'props' and 'props' are incompatible.
    Property 'aString' is missing in type 'PropsWithChildren<{ aNumber: number; }>' but required in type '{ aNumber: number; aString: string; }'.ts(2322)

FunctionComponent 在 react 中定义为：

    interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        defaultProps?: Partial<P>;
        displayName?: string;
    }

我不明白这个错误。如果我定义了一个带有约束的 var 以具有 aNumber，并且我为它分配了一个更丰富的元素 => 为什么它不开心？为什么它抱怨那些“更丰富”的属性？

当然，以下工作：

let f1: FunctionComponent<any> = MyComp;

通常，当我在 TS 中尝试高级打字构造时，我终于在经历了很多头痛之后让它工作了。这次好像不是很高级，但我没弄明白。

非常感谢。

Answer 1

问题在于 React 组件是函数，而函数是相反变体的，这意味着如果需要带有 T 类型参数的函数，那么它可以满足更广泛类型的函数比T，但不是更窄的类型。这与诸如 co 变体的普通对象相反，即接受较窄的类型，但不接受较宽的类型。

你可以在没有任何 React 代码的情况下看到同样的东西

function MyFunc(props:{a: number, b: string}){return}

let func2: (props:{a:number})=>void = MyFunc 
//   ^-- error because MyFunc is narrower than typeof func2

一种直观的思考方式是从调用你的函数/React 组件的消费者的角度来考虑。在他们期望调用typeof f2 的函数的情况下，他们期望只需要传递aNumber 的道具，但是通过将更窄的函数分配给f2，他们现在还需要传递aString ，这是他们没有预料到的。

出于可以理解的原因，这个问题在 React 中经常出现。想象一下，你有一个 <Button> 组件，它接受一个 props，一个 <FancyButton> 组件接受多个 props。很容易想到，如果我需要任何旧的 <Button> 而不是 <FancyButton> 也可以。这听起来像是简单的继承。但是，如果您再考虑一下，就会出现错误。如果我是一个 component 期望需要插入一个 <Button> 作为我的孩子之一，这意味着我只希望需要传递它 one 道具。如果我现在换入<FancyButton>，那么该组件现在会期望得到一堆我没想到会提供的道具。

直观的一点是，您不只是显示<Button> 组件——在这种情况下，您可以不关心<FancyButton> 具有更多“花哨”这一事实。这是您实际上需要为组件提供输入--props--，因此更窄的输入将需要您（父组件）提供更多。

当然，同样的逻辑对于所有函数来说都是正确的，但我想它往往在 React 中出现得更频繁，因为我们倾向于将组件视为“要显示的对象”。

一般来说，这里有一个关于这个问题的更广泛的 SO 答案（起初很棘手！）：Difference between covariant and contravariant positions in Typescript