当前位置: 首页 > article >正文

【TS】TypeScript内置条件类型-ReturnType

ReturnType

在TypeScript中,ReturnType 是一个内置的条件类型(Conditional Type),它用于获取一个函数返回值的类型。这个工具类型非常有用,特别是当你需要引用某个函数的返回类型,但又不想直接写出那个具体的类型时。

ReturnType 的基本语法如下:

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

例如,如果你有一个函数createApp,它是Vue 3中用于创建Vue应用实例的函数,你可以这样使用ReturnType来获取它的返回类型:

import { createApp } from 'vue';  
  
// 假设App是一个Vue组件  
import App from './App.vue';  
  
// 使用ReturnType获取createApp的返回类型  
type VueApp = ReturnType<typeof createApp>;  
  
const app: VueApp = createApp(App);  
  
// 现在app的类型是VueApp,它实际上是createApp函数的返回类型  
// 在Vue 3中,这通常是一个具有mount、component、directive等方法的对象  
  
// 如果你有一个函数需要接受这样的Vue应用实例作为参数  
function useApp(appInstance: VueApp) {  
  // ...  
}  
  
// 你可以安全地将app传递给这个函数  
useApp(app);

注意,ReturnType 只能用于函数类型。如果你尝试将它用于非函数类型,TypeScript会报错。createApp是Vue库的一部分,并且Vue库是用TypeScript编写的,所以ReturnType能够准确地推断出Vue应用实例的类型。

了解释这个类型定义,我们可以将其分解为几个部分:

  • 泛型约束:T extends (…args: any[]) => any
    这部分定义了一个泛型T,它必须是一个函数类型。这个函数类型可以接受任意数量和类型的参数(由(…args: any[])表示),并返回任意类型的值(由=> any表示)。这是ReturnType能够工作的前提,即它只能用于函数类型。

  • 条件类型:T extends (…args: any[]) => infer R ? R : any
    条件类型允许TypeScript根据某个条件来解析类型。在这个例子中,条件是T(一个函数类型)是否可以被视为一个具有特定签名(即接受任意参数并返回某个值的函数)的类型。如果T满足这个条件(实际上,由于泛型约束,它总是满足的),那么TypeScript将使用infer关键字来推断出函数的返回类型,并将其赋值给R。然后,条件类型的“真”分支(即?后面的部分)就是R,即函数的返回类型。

如果T不满足条件(但实际上由于泛型约束,这种情况不会发生),则条件类型的“假”分支(即:后面的部分)将被使用,这里是any。但在ReturnType的定义中,由于有泛型约束,所以“假”分支实际上永远不会被执行。

  • 类型别名:type ReturnType<…> = …
    最后,整个表达式被定义为一个类型别名ReturnType,它接受一个泛型参数T,并返回该函数的返回类型。

在TypeScript中,infer R表示在条件类型(conditional types)中引入的一个待推断的类型变量。这个变量R用于在条件类型的真实分支中引用,以推断出待推断的类型。infer是TypeScript 2.8及以后版本中引入的一个关键字,它允许在条件类型中进行类型推导,从而实现更灵活和可复用的类型定义。

具体来说,当在extends子句中使用infer时,infer R(其中R可以是任意标识符)用于从满足某个条件的类型中推断出具体的类型。


http://www.kler.cn/news/325196.html

相关文章:

  • Java五子棋
  • 召回11 地理位置召回、作者召回、缓存召回
  • Oracle 表空间时间点恢复
  • 【自动化测试】Appium Server如何安装和Appium Server安装困难的原因和解决方法以及常见的一些安装失败的错误和解决方法
  • 前端问题小结
  • 大模型,互联网玩家们的「角斗场」
  • 算法【Java】—— 位运算
  • python中logging的用法
  • python基础库
  • 铺铜修改后自动重铺
  • 第十一章 【前端】调用接口(11.1)——Vite 环境变量
  • Redis(初步认识和安装)
  • 智慧城市交通管理中的云端多车调度与控制
  • vue打包后的dist文件如何启动测试
  • Midjourney参数详解
  • 经纬仪应用前景
  • leetcode刷题day29|贪心算法Part03( 134. 加油站、135. 分发糖果、860.柠檬水找零、406.根据身高重建队列)
  • 建筑资质应该怎么选?
  • LeetCode 每日一题 2024/9/23-2024/9/29
  • Java项目实战II基于Java+Spring Boot+MySQL的网上摄影工作室(源码+数据库+文档)
  • Qemu开发ARM篇-5、buildroot制作根文件系统并挂载启动
  • 常见字符函数和字符串函数(上)
  • 在Linux中修改vm.max_map_count参数的步骤
  • InternVL 微调实践
  • C#里使用最简单的线程调用界面更新的方法
  • 【蚂蚁HR-注册/登录安全分析报告】
  • 基于大数据技术的颈椎病预防交流与数据分析及可视化系统
  • 【Webpack】优化前端开发环境的热更新效率
  • 上交所系统被股民买崩了?原因竟然是...
  • 宠物智能听诊器科技赋能宠物医疗