[英]Typescript :: Related Generic Constraints
In React
, I have a generic interface like so:在
React
中,我有一个像这样的通用接口:
interface BaseProps<T> {
data: T;
}
The consumers of my code will extend this to define their own Props
and Component
:我的代码的使用者将扩展它以定义他们自己的
Props
和Component
:
interface MyProps extends BaseProps<string> {
...
}
const MyComponent: React.FC<MyProps> = ({ data }) => {
...
}
I want to write a method that accepts such a component and returns a value of the same type as MyComponent.data
.我想编写一个方法来接受这样的组件并返回与
MyComponent.data
相同类型的值。 This is what I'm struggling with.这就是我正在努力解决的问题。 I'm trying to write this method and invoke it as:
我正在尝试编写此方法并将其调用为:
function myFunc<T, U extends BaseProps<T>>(component: React.FC<U>): T {
return ...
}
const ret1 = myFunc(MyComponent);
const ret2 = myFunc<string, MyProps>(MyComponent);
ret2
has the correct type string
but ret
comes out to have unknown
type. ret2
具有正确的类型string
,但ret
结果是unknown
类型。 Is there a way I can enforce constraints in the myFunc
method such that ret1
is typed correctly without requiring me to explicitly declare types in <>
?有没有一种方法可以在
myFunc
方法中强制执行约束,以便正确键入ret1
而无需我在<>
中显式声明类型?
Both @futut and @proton have given (almost) identical solution that clearly work in this case! @futut 和@proton 都给出了(几乎)相同的解决方案,在这种情况下显然有效! Kudos!
荣誉!
However, the sample code I wrote here was a bit over-simplified.但是,我在这里编写的示例代码有点过分简化了。 If I change the
BaseProps
interface to:如果我将
BaseProps
接口更改为:
interface BaseProps<T> {
callback: (value: T) => void;
}
Then I can no longer use U["data"]
.然后我不能再使用
U["data"]
。 Is there a way to be able to return a value of the type of value
parameter in MyComponent.callback
in this case?在这种情况下,有没有办法能够在
MyComponent.callback
中返回value
?
PS: Apologies for shifting the goalpost here. PS:很抱歉在这里转移球门柱。 My bad at oversimplifying too much.
我不擅长过于简单化。
TypeScript doesn't know that the type U
provided can also tell it what T
is. TypeScript 不知道提供的类型
U
也可以告诉它T
是什么。 You could instead use a single type parameter and use an indexed access to get the type of its data
property:您可以改为使用单个类型参数并使用索引访问来获取其
data
属性的类型:
function myFunc<T extends BaseProps<any>>(component: React.FC<T>): T["data"] {
/* ... */
}
Just explicitly inform typescript, that type of BaseProps.data
is going to be function return value, like below:只需明确通知 typescript,该类型的
BaseProps.data
将是 function 返回值,如下所示:
function myFunc<T, U extends BaseProps<T>>(component: React.FC<U>): U['data'] {
...
}
That way you won't have to pass types to generic statement ( <>
), as long as your component passed to myFunc
is typed properly.这样您就不必将类型传递给泛型语句 (
<>
),只要传递给myFunc
的组件类型正确即可。
Edit: Regarding second version of question: Things get tricky here.编辑:关于问题的第二个版本:这里的事情变得棘手。 You can point to value of a callback by using
infer
keyword like below:您可以使用
infer
关键字指向回调的值,如下所示:
function myFunc<T extends BaseProps<any>>(
component: React.FC<T>,
): T['callback'] extends (a: infer R) => void ? R : never {
...
Check documentation regarding that keyword: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html检查有关该关键字的文档: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.