Reactjs 如何键入提供道具的高阶组件

我有一个示例占位符组件，它使用两个必需的道具：

type ComponentProps = {
  foo: string;
  bar: number;
}

const Component = (props: ComponentProps) => <></>;

但是，当前返回

withFoo（）

会在

上产生以下错误：

类型“{foo:string；}&Pick”不可分配给类型“IntrinsicAttributes&T”。
类型“{foo:string；}&Pick”不可分配给类型“T”。
“{foo:string；}&Pick”可分配给类型为“T”的约束，但“T”可以用约束“wrapperProviders”的不同子类型实例化。（2322）

就功能而言，代码已经按预期工作，但我不知道这里的类型问题是什么。
我已经浏览了有关

“可以用不同的约束子类型实例化”

“的相关问题，但我觉得我在概念上不理解这个问题

---

可以找到复制该问题的类型脚本。

TS将无法理解

WrapperProvides&Omit

与

T

相同。您可以使用类型断言

function withFoo<T extends WrapperProvides>(ToWrap: (componentProps: T) => JSX.Element) {
  type RemainingProps = Omit<T, keyof WrapperProvides>;
  const providedFoo = "foo";
  return (props: RemainingProps) => <ToWrap foo={providedFoo} {...props as any} />;
}

---

非常感谢您的解释，我很感激。我在这个问题上坚持了很长一段时间，尽管我尝试了很多方法，但还是不知道问题出在哪里。这是一个很好的提醒，尽管所有的好东西，即使TS有时也有局限性。

const WrappedComponent = withFoo(Component);
const result = <WrappedComponent bar={42} />;

Type '{ foo: string; } & Pick<T, Exclude<keyof T, "foo">>' is not assignable to type 'IntrinsicAttributes & T'.
  Type '{ foo: string; } & Pick<T, Exclude<keyof T, "foo">>' is not assignable to type 'T'.
    '{ foo: string; } & Pick<T, Exclude<keyof T, "foo">>' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'WrapperProvides'.(2322)

function withFoo<T extends WrapperProvides>(ToWrap: (componentProps: T) => JSX.Element) {
  type RemainingProps = Omit<T, keyof WrapperProvides>;
  const providedFoo = "foo";
  return (props: RemainingProps) => <ToWrap foo={providedFoo} {...props as any} />;
}

function withFoo<T extends WrapperProvides>(ToWrap: (componentProps: T | (WrapperProvides & Omit<T, keyof WrapperProvides>)) => JSX.Element) {
  type RemainingProps = Omit<T, keyof WrapperProvides>;
  const providedFoo = "foo";
  return (props: RemainingProps) => <ToWrap foo={providedFoo} {...props} />;
}