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:抱歉把球门柱移到了这里。我不擅长过于简单化。