typescript Awaited<Type>教程用法
typescript Awaited教程用法
文章目录
- typescript Awaited<Type>教程用法
ts4.5发布了Awaited,但是很多人不明白Awaited的用法。
首先看一下官方的说明:这种类型旨在模拟函数await中的操作async,或 s.then()上的方法——特别是它们递归解包Promise的方式。
首先看一个例子:
async function test() {let aa = Promise.resolve(Promise.resolve(Promise.resolve('hello world')))let bb = await aa;
}
test();
这里我们可以正确得到bb类型为string
。
在js中和ts中,await和.then()都能递归得到一个非Promise的。Awaited就是模仿这种行为,递归解包获取其中的类型。不理解没事,继续往下看:
let aa = Promise.resolve(Promise.resolve(Promise.resolve('hello world')))
还是这段代码
我们想设置一个别名 cc 的类型为 aa 的Promise异步操作返回值的类型
该怎么做?
或许有人认为,直接设置 string
类型不就好了:
let aa = Promise.resolve(Promise.resolve(Promise.resolve('hello world')))
type cc = string;
但这样真的好吗,很多请求或者异步操作返回值可能都是不固定,当然,除非你定死它返回的必须是string类型。如果这样或许你真的不需要Awaited了。
进行下面内容开始之前,你脑海中需要有一个印象:
let aa = Promise.resolve(Promise.resolve(Promise.resolve('hello world')))
type cc = typeof aa
其中cc的类型为 Promise<string>
,这很重要。=所以,看到这里,我们要做的就是取出Promise中的string(也可能是其他,总之是尖括号里的内容)。=
推荐你每一步都手动操作一下,地址:typescript在线运行
接下来使用另一种方法:
let aa = Promise.resolve(Promise.resolve(Promise.resolve('hello world')))
type cc = typeof aa extends Promise<infer U> ? U : typeof aa;
在 Awaited 还没出来之前,一般使用这种方法获取异步操作返回值的类型。首先判断 typeof aa
是否为 Promise
,如果是则取出其中的类型,如果不是,则直接返回typeof aa
。
肉眼可见,确实不方便:
接下来使用 Awaited:
let aa = Promise.resolve(Promise.resolve(Promise.resolve('hello world')))
type cc = Awaited<typeof aa>
是不是很简洁。
如果你用过infer,到这里基本上就理解了。
为什么这里使用 typeof aa
:
- 这里的aa其实是一个值,而type需要一个类型,所以我们需要一个关键字typeof获取aa的类型。
既然typeof aa
就表示类型,为什么还要Awaited<>:
- 上文说了,typeof aa 会返回
Promise<string>
,而这篇文章主要讲的内容就是获取异步操作返回值的类型。
看一个例子:
type aa = Promise<Promise<Promise<string>>>
type cc = Awaited<aa>
如果 aa 是类型,则我们可以直接使用 Awaited<aa>
,我们cc的类型为string
类型。
typescript Awaited<Type>教程用法相关推荐
- Go语言的type func()用法 | type func() 自定义函数类型
文章目录 一.前置基础 1. go 函数基础 2. 函数签名 二.Go语言的type func()用法 | type func() 自定义函数类型 1. golang通过type定义函数类型 一.前置 ...
- 【Angular】—— TypeScript问号的奇特用法
更新日志: [2019-09-19] 文章发布 说明: 本文地址 <[Angular]-- TypeScript问号的奇特用法>https://blog.csdn.net/maixiaoc ...
- pythontype函数使用_基础教程:python isinstance与type函数用法
这两个函数有意义用法差不多,都是查看对象的,但是两者之间也有一定区别,具体内容请看下文~ 两者区别: type()是一个内置函数,可以用来查询变量所指的对象类型 isinstance()是用来判断该变 ...
- 比较全面的typescript + react 开发教程
前言 本教程不用react-script这种工具,用的webpack + eslint(可选) + prettier(可选) + babel,使用编辑器用的vscode. 以下会涉及到ts语法和red ...
- node deno_Deno手册:带有代码示例的TypeScript运行时教程
node deno I explore new projects every week, and it's rare that one grabs my attention as much as De ...
- TypeScript 高级类型及用法
一.高级类型 交叉类型(&) 交叉类型是将多个类型合并为一个类型.这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性. 语法:T & U 其返回类型既要符 ...
- vue使用ts 引入组件_vue项目中使用ts(typescript)入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
- 最详细从零开始配置 TypeScript 项目的教程
点击上方"逆锋起笔",公众号回复 PDF 领取大佬们推荐的学习资料 关于作者 本文出自于掘金的子弈[1],感谢桃翁整理,原文链接 从零开始配置 TypeScript 项目[2].以 ...
- 转载:《TypeScript 中文入门教程》 4、类
版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件,但这对 ...
最新文章
- html文字变成汉堡插件,一组超酷汉堡包图标变形动画特效
- Boost.Flyweight 序列化示例
- java中不能定义为变量名称_Java,“变量名”不能解析为变量
- C语言深入理解!助你向大佬迈进!
- android 通知传值,Android消息通知(notification)和PendingIntent传值
- js获取一个月份最大天数和获取月的最后一天
- 技术生态两手抓,打造面向未来的企业级领先数据库
- python中属于有序序列的有_Python中的有序序列有哪些
- 什么是Semantic(语义)?从互联网爬虫、自动驾驶到对话机器人
- Python使用总结
- WEB应用程序的开发和研究
- C++实现自动出算术题
- excel数组公式中的意想不到的坑
- CentOS 用Strongswan搭建IPSec ***
- mermaid与flowchart.js绘制流程图分支结构试验
- Hazel引擎学习(四)
- 怎么用python下载视频_使用Python从直接URL下载视频
- 【高等数学】矩阵与向量组的秩和等价
- 火车票余票计算的一种方法
- 我是如何写出一本畅销技术书的?持续更新