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

【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可以是任意标识符)用于从满足某个条件的类型中推断出具体的类型。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 实时监控,动态调整 —— 淘宝商品详情API助力商家实现灵活经营
  • 优化算法(五)—梯度下降算法(附MATLAB程序)
  • 汽车售后诊断ECU参数分析
  • Pygame中Sprite实现逃亡游戏3
  • Pandas 数据分析入门详解
  • 基于阿里云免费部署Qwen1-8B-chat模型并进行lora参数微调从0到1上手操作
  • Unity2022.3.x各个版本bug集合及推荐稳定版本
  • 基于AI+多技术融合在流域生态系统服务评价、水文水生态分析、碳收支、气候变化影响、制图等领域中的实践应用
  • 神经网络(四):UNet图像分割网络
  • 运行程序时总是提示带so.xx.xx版本号共享库打不开(共享库的不同命名的含义)
  • MySQL的登录、访问、退出
  • 伊犁云计算22-1 apache 安装rhel8
  • 如何在 Rust 中通过 Rumqttc 实现 MQTT 通信
  • Cannot read properties of undefined (reading ‘upgrade‘)
  • R包:ggheatmap热图
  • E-HPC支持多队列管理和自动伸缩
  • express如何解决request entity too large问题
  • jquery ajax学习笔记
  • pdf文件如何在线转换为jpg图片
  • React Native移动开发实战-3-实现页面间的数据传递
  • Webpack 4x 之路 ( 四 )
  • weex踩坑之旅第一弹 ~ 搭建具有入口文件的weex脚手架
  • 阿里云爬虫风险管理产品商业化,为云端流量保驾护航
  • 力扣(LeetCode)21
  • 一文看透浏览器架构
  • ​LeetCode解法汇总2583. 二叉树中的第 K 大层和
  • # .NET Framework中使用命名管道进行进程间通信
  • # 学号 2017-2018-20172309 《程序设计与数据结构》实验三报告
  • (02)Unity使用在线AI大模型(调用Python)
  • (16)Reactor的测试——响应式Spring的道法术器
  • (C#)Windows Shell 外壳编程系列4 - 上下文菜单(iContextMenu)(二)嵌入菜单和执行命令...
  • (Matalb时序预测)WOA-BP鲸鱼算法优化BP神经网络的多维时序回归预测
  • (动手学习深度学习)第13章 计算机视觉---图像增广与微调
  • (数据大屏)(Hadoop)基于SSM框架的学院校友管理系统的设计与实现+文档
  • (四)Android布局类型(线性布局LinearLayout)
  • (学习日记)2024.01.09
  • (译)2019年前端性能优化清单 — 下篇
  • (转)LINQ之路
  • (自用)learnOpenGL学习总结-高级OpenGL-抗锯齿
  • ***详解账号泄露:全球约1亿用户已泄露
  • .axf 转化 .bin文件 的方法
  • .NET 同步与异步 之 原子操作和自旋锁(Interlocked、SpinLock)(九)
  • .netcore 如何获取系统中所有session_ASP.NET Core如何解决分布式Session一致性问题
  • .net与java建立WebService再互相调用
  • /bin/rm: 参数列表过长"的解决办法
  • /ThinkPHP/Library/Think/Storage/Driver/File.class.php  LINE: 48
  • @Mapper作用
  • [20180224]expdp query 写法问题.txt
  • [Angularjs]asp.net mvc+angularjs+web api单页应用
  • [CQOI 2010]扑克牌
  • [Flex] PopUpButton系列 —— 控制弹出菜单的透明度、可用、可选择状态
  • [hdu 1711] Number Sequence [kmp]
  • [javaee基础] 常见的javaweb笔试选择题含答案
  • [JS]JavaScript 注释 输入输出语句
  • [LeetCode]Pow(x,n)