从一个复杂的泛型参数的函数签名深入理解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函数的返回值类型

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/238794.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Simulink仿真中Sine Wave产生的正弦波形不规则,怎么解决

在使用simulink仿真时&#xff0c;使用Sine Wave模块产生的正弦波形不是正弦的&#xff0c;如下所示&#xff1a; 这个是由于simulink仿真中自动计算步长很长的原因导致的&#xff0c;此时需要将自动的步长更改&#xff0c;操作步骤如下所示&#xff1a; 1.点击设置按钮&#…

Unresolved plugin: ‘org.apache.maven.plugins‘解决报错

新建springboot项目报Unresolved plugin: ‘org.apache.maven.plugins:maven-surefire-plugin:3.1.2’ 缺什么插件 引入什么插件的依赖就行 <dependency><groupId>org.apache.maven.plugins</groupId><artifactId>maven-install-plugin</artifact…

如何使用 Helm 在 K8s 上集成 Prometheus 和 Grafana|Part 1

本系列将分成三个部分&#xff0c;您将学习如何使用 Helm 在 Kubernetes 上集成 Prometheus 和 Grafana&#xff0c;以及如何在 Grafana 上创建一个简单的控制面板。Prometheus 和 Grafana 是 Kubernetes 最受欢迎的两种开源监控工具。学习如何使用 Helm 集成这两个工具&#x…

STM32的以太网外设+PHY(LAN8720)使用详解(6):以太网数据接收及发送

0 工具准备 1.野火 stm32f407霸天虎开发板 2.LAN8720数据手册 3.STM32F4xx中文参考手册1 以太网数据接收及发送 1.1 以太网数据接收&#xff08;轮询&#xff09; 1.1.1 检查是否接收到一帧完整报文 使用轮询的方式接收以太网数据是一种简单但是效率低下的方法&#xff0c;…

2023 下半年系统架构设计师学习进度

文章目录 复习计划&#xff1a;每周350分钟第一周&#xff08;339分钟&#xff09;第二周&#xff08;265分钟&#xff09;第三周&#xff08;171分钟&#xff09;第四周&#xff08;214分钟&#xff09;第五周&#xff08;274分钟&#xff09;第六周&#xff08;191分钟&#…

im6ull学习归纳总结(一)APP——04_文件IO

4.1文件从何而来 如图所示文件可以是 1真实文件保存在设备上 2内核提供的虚拟文件 3设备节点 4.2文件的访问方式 4.2.1通用IO模型&#xff1a;open/read/write/lseek/close 实验1 copy文件 代码 #include <sys/types.h> #include <sys/stat.h> #include <fc…

大模型杀入HR赛道,AI能扮演好企业的“人才捕手”吗?

导读&#xff1a;生成式AI如何让HR回归本质。 当很多人焦虑未来会“被AI夺走工作”时&#xff0c;HR行业本身也在AI浪潮推动下发生巨变。 AI技术现已应用于人力资源管理的各个环节中。根据领英发布的《2024全球人才趋势报告》&#xff0c;61%的HR已经在使用AI相关技术辅助日常工…

主从复制mysql-replication | Replication故障排除

主从复制mysql-replication 准备环境 #防火墙 selinux systemctl stop firewalld --now &&setenforce 0 #修改主机名&#xff1a;hostnamectl set-hostname 名字 tip&#xff1a;vim /etc/sysconfig/network-scripts/ifcfg-ens33 BOOTPRTOTstatic IPADDR192.168.100.…

LDAP报文交互流程详解

LDAP报文交互流程通常包括以下步骤&#xff1a; 建立TCP连接&#xff1a;LDAP客户端首先通过TCP连接到LDAP服务器。默认情况下&#xff0c;LDAP使用端口389进行非安全通信&#xff0c;而使用端口636进行安全通信&#xff08;如SSL/TLS&#xff09;。 管理员绑定&#xff1a;客…

Python密码魔法:制作个性化、安全性满分的密码生成器秘籍!

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 密码是保护个人信息安全的关键&#xff0c;而一个强密码生成器能够帮助用户创建高度安全的密码。本文将介绍如何使用 Python 制作一个简单而功能强大的密码生成器&#xff0c;涵盖了各种生成密码的方法、密码强度…

Linux数据库主从复制(单主单从)

MySQL主从复制的优点包括&#xff1a; 1、横向扩展解决方案 - 在多个从站之间分配负载以提高性能。在此环境中&#xff0c;所有写入和更新都必须在主服务器上进行。但是&#xff0c;读取可以在一个或多个从设备上进行。该模型可以提高写入性能&#xff08;因为主设备专用于更新…

驾校抖音直播话术

1. 自我介绍 大家好&#xff0c;我是[教练姓名]&#xff0c;欢迎来到我的直播间&#xff01;我是一名专业的驾校教练&#xff0c;今天我将和大家分享一些关于学车的技巧和经验。 2. 引入话题 在学车过程中&#xff0c;选择一个好的驾校和教练是非常重要的。我们驾校拥有专业的…

5个未来AI的新趋势

人工智能正在迅速发展&#xff0c;通过询问业内的人工智能研究人员&#xff0c;根据他们的说法&#xff0c;人工智能将在未来几年内改变世界。以下是作为开发人员应该了解的未来 5 年人工智能的 5 大趋势。 1、可解释人工智能 可解释人工智能&#xff08;XAI&#xff09;是指…

JavaFX:Observable和ObservableValue的事件处理(invalidated和changed)

JavaFX提供了Observable接口和ObservableValue接口&#xff0c; 处理invalidated&#xff08;数据失效&#xff09;和changed&#xff08;数据更新&#xff09;事件。 示例一&#xff1a; 自定义类继承InvalidationListener接口&#xff0c;当数据失效时&#xff0c;触发该接…

kotlin ——数组

一、创建数组&#xff1a; 1、arrayOf val array arrayOf(1,2,3)2、arrayOfNulls val array1 arrayOfNulls<Int>(3)array1[0]2array1[1]12array1[2]253、动态创建数组(接受一个表达式)&#xff0c; Array 初始化为 [“0”, “1”, “4”, “9”, “16”,"36] val …

【接口测试】如何定位BUG的产生原因

我们从在日常功能测试过程中对UI的每一次操作说白了就是对一个或者多个接口的一次调用&#xff0c;接口的返回的内容(移动端一般为json)经过前端代码的处理最终展示在页面上。http接口是离我们最近的一层接口&#xff0c;web端和移动端所展示的数据就来自于这层&#xff0c;那么…

用C爬取人人文库并分析实现免积分下载资料

最近有个学妹学习遇到问题&#xff0c;想要的学习资料都在文库中&#xff0c;因为资料太多太杂&#xff0c;想要一篇篇找太难了&#xff0c;主要是太浪费精力了。因此&#xff0c;听说这个事情我能解决&#xff0c;立马找到我&#xff0c;给我一杯奶茶就把我收买了&#xff0c;…

【Seata源码学习 】 扫描@GlobalTransaction注解 篇一

1. SeataAutoConfiguration 自动配置类的加载 基于SpringBoot的starter机制&#xff0c;在应用上下文启动时&#xff0c;会加载SeataAutoConfiguration自动配置类 # Auto Configure org.springframework.boot.autoconfigure.EnableAutoConfigurationio.seata.spring.boot.aut…

DPDK单步跟踪(3)-如何利用visual studio 2019和visual gdb来单步调试dpdk

准备工作 因为时间的关系&#xff0c;我想到哪说到哪&#xff0c;可能没那么高的完成度。 但其实有心的人&#xff0c;看到这个标题&#xff0c;就关了本文自己能做了。 why和how to build debug version DPDK,见前两篇。这里我们准备开始。 首先&#xff0c;你有一台linux机…

Vue3入门精讲:一文讲透Vue3知识点

&#x1f9d9;‍♂️ 诸位好&#xff0c;吾乃诸葛妙计&#xff0c;编程界之翘楚&#xff0c;代码之大师。算法如流水&#xff0c;逻辑如棋局。 &#x1f4dc; 吾之笔记&#xff0c;内含诸般技术之秘诀。吾欲以此笔记&#xff0c;传授编程之道&#xff0c;助汝解决技术难题。 &a…