reactjs - TypeScript 不从 React.ComponentType 推断 Prop

Question

我有以下函数，我想用它来接收 ComponentType及其 Prop ，以便我可以将这些 Prop 与 RouteComponentProps 一起注入(inject)

const routeComponentFactory = <TProps extends {}>(
    Component: React.ComponentType<TProps>,
    props: TProps
) => {
    return (routeProps: RouteComponentProps) => {
        return <Component {...routeProps} {...props} />;
    };
};

如果我明确指定 TProps，此函数将正常工作，例如:

interface MyComponentProps { a: number; b: number; }
const MyComponent: React.FunctionComponent<MyComponentProps> = () => null;

routeComponentFactory<MyComponentProps>(MyComponent, {});

我在那里收到一个错误，因为我没有提供 a和 b在对象中。

但是，如果我删除显式的 <MyComponentProps> ，错误消失了，我可以使用空对象调用该函数。

如何让 TypeScript 正确推断 MyComponentProps ？

Answer 1

如果启用 strictFunctionTypes，您将收到错误消息:

Type 'FunctionComponent<MyComponentProps>' is not assignable to type 'FunctionComponent<{}>'.

TProps 有两个可能的推理点，参数 Component 和 props 都包含类型参数 TProps所以 typescript 试图找到一种能让两个网站都满意的类型。因为如果 TProps 是 {} 参数 {} 和 Prop 类型 MyComponentProps 都可以分配给它 typescript将 TProps 推断为 {} 以使每个人都开心。

在 strictFunctionTypes 下你确实得到一个错误的原因是默认函数类型的行为是双变的(所以函数 (p: MyComponentProps) => JSX.Element 是可分配给 (p: {}) => JSX.Element)。在 strictFunctionTypes 下，函数类型的行为是逆变的，因此这样的赋值是不允许的。

即使没有 strictFunctionTypes 也会出错的解决方案是降低 props 推理站点的优先级，因此编译器会选择对 Component< 有利的内容 并根据 props 检查它。这可以使用与 {} 的交集来完成:

const routeComponentFactory = <TProps extends {}>(
    Component: React.ComponentType<TProps>,
    props: TProps & {}
) => {
    return (routeProps: any) => {
        return <Component {...routeProps} {...props} />;
    };
};

interface MyComponentProps { a: number; b: number; }
const MyComponent: React.FunctionComponent<MyComponentProps> = () => null;


routeComponentFactory(MyComponent, {}); // Argument of type '{}' is not assignable to parameter of type 'MyComponentProps'