Typescript::相关通用约束

Question

在React中，我有一个像这样的通用接口：

interface BaseProps<T> {
  data: T;
}

我的代码的使用者将扩展它以定义他们自己的Props和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 ，但ret结果是unknown类型。 有没有一种方法可以在myFunc方法中强制执行约束，以便正确键入ret1而无需我在<>中显式声明类型？

更新

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

但是，我在这里编写的示例代码有点过分简化了。 如果我将BaseProps接口更改为：

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

然后我不能再使用U["data"] 。 在这种情况下，有没有办法能够在MyComponent.callback中返回value ？

PS：很抱歉在这里转移球门柱。 我不擅长过于简单化。

Answer 1

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

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

Answer 2

只需明确通知 typescript，该类型的BaseProps.data将是 function 返回值，如下所示：

function myFunc<T, U extends BaseProps<T>>(component: React.FC<U>): U['data'] {
  ...
}

这样您就不必将类型传递给泛型语句 ( <> )，只要传递给myFunc的组件类型正确即可。

---

编辑：关于问题的第二个版本：这里的事情变得棘手。 您可以使用infer关键字指向回调的值，如下所示：

function myFunc<T extends BaseProps<any>>(
  component: React.FC<T>,
): T['callback'] extends (a: infer R) => void ? R : never {
...

检查有关该关键字的文档： https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html