从一个复杂的泛型参数的函数签名深入理解typescript关于泛型的类型推断

以下是nuxt3中useFetch的函数签名,看起来很长有点乱对不对,但这还是我优化格式后的结果,不然更难看(原始的代码是在同一行里显示),泛型参数部分看红色的左右尖括号 里的部分(各个泛型参数用红色的逗号隔开),

export declare function useFetch<ResT = void**,** ErrorT = FetchError**,**

ReqT extends NitroFetchRequest = NitroFetchRequest**,**

Method extends AvailableRouterMethod<ReqT> = ResT extends void ? 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT> : AvailableRouterMethod<ReqT>,

_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT**,**

DataT = _ResT**,**

PickKeys extends KeysOf<DataT> = KeysOf<DataT>,

DefaultT = null**>**(request: Ref<ReqT> | ReqT | (() => ReqT), opts?: UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | null>;

这里重点通过类型推导说明:为什么ResT 就一定是useFetch的返回类型

首先看最后一行的返回值类型:

AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | null>

这也是一个泛型,首先不考虑外围AsyncData的包装,它直接跟PickFrom里面的有关系,

从字面意思也可以理解到PickFrom是:从DataT类型中挑选出key值为PickKeys所对应的类型,

那么基本可以断定AsyncData的类型最终跟DataT的类型有关

而泛型参数列表中有个定义:DataT = _ResT,就是说DataT类型取决于_ResT

而_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT

这句话的意思是如果ResT类型为空,则_ResT类型为FetchResult<ReqT, Method>,否则_ResT类型就是ResT, 一句话_ResT类型取决于ResT的类型。

所以根据链式关系: DataT =》 _ResT =》 ResT,可以得出: DataT类型取决于 ResT的类型,

而AsyncData的类型最终跟DataT的类型有关,所以AsyncData类型也取决于ResT的类型,

所以ResT的类型就是useFetch函数的返回类型

但这还不够,需要继续深挖,证明这个结论==》AsyncData的类型取决于DataT的类型

对于PickFrom<DataT, PickKeys>,我们不去深究,这个基本可以判断:必定取决于DataT类型

重点要看AsyncData部分的定义 :

export interface _AsyncData<DataT, ErrorT> {

data: Ref<DataT>;

pending: Ref<boolean>;

refresh: (opts?: AsyncDataExecuteOptions) => Promise<DataT>;

execute: (opts?: AsyncDataExecuteOptions) => Promise<DataT>;

error: Ref<ErrorT | null>;

status: Ref<AsyncDataRequestStatus>;

}

export type AsyncData<Data, Error> = _AsyncData<Data, Error> & Promise<_AsyncData<Data, Error>>;

从上面的代码可以看到:AsyncData取决于_AsyncData,而_AsyncData的类型的真正数据是data属性,而data正是AsyncData的第一个泛型参数:Data, 而Data相当于上面的

PickFrom<DataT, PickKeys> | DefaultT, 这个值直接跟DataT类型有关

所以这里就证明了: AsyncData的类型确实取决于DataT的类型,而 DataT类型又取决于 ResT的类型,所以****AsyncData的类型最终取决于ResT的类型,而AsyncData是useFetch函数返回值类型,那么可以推断出==》ResT类型就是useFetch函数的返回值类型

相关推荐
螺丝钉tina2 小时前
[Playwright ][16]Playwright + TypeScript API 自动化测试实战:API测试
前端·javascript·typescript
华玥作者7 小时前
Vue 3 + TypeScript + uni-app 组件库推荐:hy-app(华玥组件库)
vue.js·typescript·uni-app
Momo__1 天前
你写的 import 重试,从来没生效过
前端·javascript·typescript
长不大的杨瑞杰2 天前
OpenCode v2 Custom Tools 实战:开发数据库、工单与发布工具
人工智能·typescript·开发工具·opencode·custom tools
shmily麻瓜小菜鸡2 天前
TypeScript 知识点补充(第三部分:工程化与高级类型)
前端·javascript·typescript
腾科IT教育3 天前
TypeScript 泛型(Generics):类型占位符实现复用与安全
安全·typescript·泛型
猫头_3 天前
MCP 开发实战:把你自己的后端 API 接入 Agent
人工智能·typescript·mcp
长不大的杨瑞杰3 天前
OpenCode v2 LSP 实战:内置语言服务器、自定义配置与诊断闭环
java·人工智能·typescript·lsp·opencode
Highcharts.js3 天前
Highcharts 集成到 React 或 Vue 项目中时,如何高效地使用 TypeScript技巧?
vue.js·人工智能·react.js·typescript·前端框架·highcharts
二哈赛车手4 天前
新人笔记---hermes定时功能设计,具体讲解以及可优化点
java·人工智能·笔记·spring·ai·typescript