In React，我有一个像这样的通用界面：

interface BaseProps<T> {
  data: T;
}

我的代码的使用者将扩展它来定义他们自己的Props and Component:

interface MyProps extends BaseProps<string> {
  ...
}
const MyComponent: React.FC<MyProps> = ({ data }) => {
  ...
}

我想编写一个接受这样的组件并返回与以下类型相同类型的值的方法MyComponent.data。这就是我正在努力解决的问题。我正在尝试编写此方法并将其调用为：

function myFunc<T, U extends BaseProps<T>>(component: React.FC<U>): T {
  return ...
}
const ret1 = myFunc(MyComponent);
const ret2 = myFunc<string, MyProps>(MyComponent);

ret2有正确的类型string but ret出来有unknown类型。有没有办法可以强制执行约束myFunc方法使得ret1类型正确，不需要我显式声明类型<>?

Update

@futut 和 @proton 都给出了（几乎）相同的解决方案，在这种情况下显然有效！荣誉！

然而，我在这里编写的示例代码有点过于简单。如果我改变BaseProps接口：

interface BaseProps<T> {
  callback: (value: T) => void;
}

然后我就不能再使用了U["data"]。有没有办法能够返回类型的值value参数输入MyComponent.callback在这种情况下？

PS：抱歉把球门柱移到了这里。我不擅长过于简单化。

TypeScript 不知道类型U还可以告诉它什么T是。您可以改为使用单个类型参数并使用索引访问来获取其类型data财产：

function myFunc<T extends BaseProps<any>>(component: React.FC<T>): T["data"] { 
    /* ... */ 
}