首页 > 解决方案 > 解构由另一个泛型制成的泛型类型

问题描述

抱歉,如果问题标题含糊不清。不知道如何最好地描述这一点

假设我有这个通用接口

interface IPaginatedResponse<T> {
    results: T[],
    page: number,
    count: number
}

我有这个具体的类型

type PaginatedUsers = IPaginatedResponse<User>

现在我想创建一个函数,它接受任何type具体类型的IPaginatedResponse

// Invalid syntax

const myFn = <IPaginatedResponse<T>>() => {
 ...
 // Do something with T
}

这样我就可以捕捉到打字错误

myFn<PaginatedUsers>()  // OK
myFn<User>()            // Fails

以上是伪代码。

标签: typescripttypescript-typingstypescript-generics

解决方案


如果你的函数需要任何IPaginatedResponse,你会希望你的函数需要<T extends IPaginatedResponse<any>>。要访问内部类型,您可以使用该infer键创建一个通用帮助器来提取您正在分页的任何内容的类型:

type GetPaginatedType<T extends IPaginatedResponse<any>> = T extends IPaginatedResponse<infer R> ? R : never;

然后,您可以使用该助手来获取函数中的类型(或将其添加到您的 return 语句中)。

type User = "user"
interface IPaginatedResponse<T> {
    results: T[],
    page: number,
    count: number
}
type PaginatedUsers = IPaginatedResponse<User>
type GetPaginatedType<T> = T extends IPaginatedResponse<infer R> ? R : never;
// this works
const user: GetPaginatedType<PaginatedUsers> = "user";

// this doesn't
const notUser: GetPaginatedType<PaginatedUsers> = "notuser";

const myFn = <T extends IPaginatedResponse<any>>() => {
  type MyInternalType = GetPaginatedType<T>;
}

myFn<PaginatedUsers>();
// this correctly errors
myFn<User>();

操场


推荐阅读