请教一个 Typescript 的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 319 天前的主题，其中的信息可能已经有所发展或是发生改变。

有两个响应类型 ResultData （不分页）和 ResultPage （分页），我下面封装的 get 方法每次调用的时候都要导入 ResultPage 或 ResultData ；

http.get<ResultPage<SomeType>>("/test", params);

或

http.get<ResultData<SomeType>>("/test", params);

TS 有没有什么办法传入一个参数或怎样实现自动识别调用分页和不分页的类型?

get<T>(url: string, params?: object, _object = {}): Promise<T> {
  return this.service.get(url, { params, ..._object });
}

// 请求响应
export interface Result {
  code: string;
  message: string;
}

// 请求响应数据
export interface ResultData<T = any> extends Result {
  data: T;
}

// 请求分页响应
export interface ResultPage<T> extends Result {
  count: number;
  current: number;
  limit: number;
  data: T[];
}

14 条回复 • 2024-02-18 15:55:21 +08:00

des

319 天前 via iPhone

Promise<ResultPage<T>>

des

319 天前 via iPhone

@des 定义两个不同的 get ，getPage 和 getResult 吧

pursuer

319 天前

大概试了一下类似这样
interface test{
(page:true):Promise<ResultPage>
(page:false):Promise<ResultData>
}
let get:test=function(page){
...
} as test;

tlerbao

319 天前

@des #2 定义两个 get 看来是比较简单的方法，但是为了学习更多的知识，不知道 typescript 有没有什么工具方法，或者传入两个泛型参数之类的（假设）。所以来问问

xavierchow

319 天前

> http.get<ResultPage<SomeType>>("/test", params);
> 或
> http.get<ResultData<SomeType>>("/test", params);

这两个调用的参数一模一样，可以思考一下为什么你每次调用的时候知道该指定哪个返回类型？（ ResultData VS ResultPage ）
是不是其实 params 的类型是不一样的？
如果是的话，可以去定义 params 的类型，然后用 https://www.typescriptlang.org/docs/handbook/2/conditional-types.html ，大致思路就是用 param 的类型去确定响应的类型。

另一个方式就是你去定义 UnionType ，比如 Result = ResultData | ResultPage, 你只用写 http.get<Resutl> ...
然后在使用返回的响应值的地方，用 TypeGuard （ https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards ）去 narrow down 具体的类型（ ResultData VS ResultPage ）

zogwosh

319 天前

用函数重载

BeautifulSoap

319 天前

为什么一定要定义成接口，定义 ResultData 和 ResultPage 的 class 实现 Result 接口，然后传对应 class 的 object ，get 里用 instanceof 判断下不就解决的事情，，，，，，

ts 编译时会把所有接口信息抹去，在接口上折腾没意义（虽然我不知道类型体操有没有黑魔法能做到）

wusheng0

319 天前 via Android

T extends Array ? ResultPage : ResultData 这种呢

mmdsun

318 天前 via iPhone

自定义类型？

// 定义是否包含分页属性的类型检查
type IsPaginated<Params> = Params extends { current: number; limit: number } ? true : false;

// 结果类型的条件选择
type DecideResult<T, Params> = IsPaginated<Params> extends true ? ResultPage<T> : ResultData<T>;

zhours

318 天前

@tlerbao https://www.typescriptlang.org/play?#code/FAehAJHfowhG0WZVBS9YBLAdgFwKYCcBmBDAYw3ACUMBnAVwBs1wBvYccAgewBMMAucctLVAHMA3E3ABbCuTyDuvfkNEBfYKAgwEgB1NAdsbJ02fEVIUaaACJ40eADwAVcAF5weFAE8AfOAwAPTCnbkxlS0DGLslng8tsqqYFDQgGBKgK4ZCHqYuITEZMFoAAoyGHaePn4BQaahzGyU6DwolOIARtiiVZRYWBi14PVNLWLUSOJIaHUNzVit4OFWUQDaALoxwJwE1Hid4Dg1BGhIrCjgsmjWALIANKSO5bQWVmfu7gAU7dQ8fAIogpcADht44nIAH4eKxGgArDC7S4AfTBkN2IPA8KhaAAlDw5qcFl5fF0ynMUBgAG7YHFAm55ArWEieHgkUSqYBsFB8HqsfKya7HawfITPABEArRohZbM5xCcPKJpKwlz5X0FwuEQA

tlerbao

318 天前

@mmdsun 没太看懂怎么用呢？

tlerbao

317 天前

@zhours 学到了，
但是在 page 的时候要先在前面写一个 never 感觉怪怪的也不语义化，还有更好的办法吗？大神
const noPage = get<string>("");
const Page = get<never, string>("");

zhours

316 天前

@tlerbao https://www.typescriptlang.org/play?#code/FAehAJHfowhG0WZVBS9YBLAdgFwKYCcBmBDAYw3ACUMBnAVwBs1wBvYccAgewBMMAucctLVAHMA3E3ABbCuTyDuvfkNEBfYKAgwEgB1NAdsbJ02fEVIUaaACJ40eADwAVcAF5weFAE8AfOAwAPTCnbkxlS0DGLslng8tsqqYFDQgGBKgK4ZCHqYuITEZMFoAAoyGHaePn4BQaahzGyU6DwolOIARtiiVZRYWBi14PVNLWLUSOJIaHUNzVit4OFWUQDaALoxwJwE1Hid4Dg1BGhIrCjgsmh2ADTg+bJevl1ljays1Bgujlt41OQY7gAU7dQ8fAEKEE5wADhs8OJyAB+HisRoAKwwu3OAH14UjdrDwBjkWgAJQ8S7EEq3QL8SjEaHlWjEorgHjZUwWKxFUSqYBsFB8HqsYmvY7WQFCH4AIlF+NEXJ5-KcguFwPOFK+33FkqAA

tlerbao

316 天前

@zhours #13 感谢