Question

我在React中有一个HoC，它只是传递了一个名为name的额外属性：

export interface WithNameProps {
  name: string;
}
function withName<P extends {}>(Wrapped: React.ComponentType<P & WithNameProps>): React.FC<P> {
    const WithName: React.FC<P> = (props) => <Wrapped {...props} name="typescript" />
    return WithName;
}

但是，当我将其与组件一起使用时：

const Person: React.FC<{age: number, name: string}> = ({name, age}) => <p>Name: {name}. Age: {age}</p>

const Me = withName(Person);

<Me age={10} />

我收到以下错误：

Property 'name' is missing in type '{ age: number; }' but required in type '{ age: number; name: string; }'

Typescript无法推断出P是{age: number, name: string}，而没有WithNameProps，即{age: number}。

如果我像下面这样显式传递类型，它将起作用：

const Me = withName<{age: number}>(Person);

如果我将Person的道具声明为交叉点类型，它也可以工作：

const Person: React.FC<{age: number} & {name: string}> = ({name, age}) => <p>Name: {name}. Age: {age}</p>

在这里，Typescript可能能够解构类型并进行推断。

我可以用某种方式修改它，而不必显式声明类型或传递相交类型吗？

我这里有Typescript游乐场链接（以及更简单的示例）：Click here

高阶组件中的类型推断

0 个答案: