Reactjs 高阶分量的类型推断

我在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;
}

Typescript无法推断

p

这里是

{age:number，name:string}

没有

WithNameProps

，即

{age:number}

如果我像这里那样显式传递类型，它就会起作用：

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

const Me=withName（Person）；

如果我将Person的道具声明为交叉点类型，它也会起作用：

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

const-Person:React.FC=（{name，age}）=>name:{name}。年龄：{Age}

在这里，Typescript可能能够对类型进行分解和推断

我是否可以修改它，使其不必显式地声明类型或传递交叉点类型

---

我这里有一个Typescript游乐场链接（还有一个简单的例子）：

在您的游乐场中，

没有错误。问题到底出在哪里？这能回答你的问题吗@KarolMajewski

有错误。它错误地将

{name:string}

作为参数。哦，我明白你的意思了。非常感谢。在我看来，这就像是一个打字错误。@KarolMajewski，我也这么认为。Typescript有结构类型，所以无论是常规类型还是交集类型都不重要。

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

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