首页 前端知识 typescript Awaited<Type>教程用法

typescript Awaited<Type>教程用法

2024-06-09 09:06:30 前端知识 前端哥 214 685 我要收藏

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类型。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11658.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!