typescript Awaited教程用法

ts4.5發(fā)布了Awaited，但是很多人不明白Awaited的用法。

首先看一下官方的說明：這種類型旨在模擬函數(shù)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就是模仿這種行為，遞歸解包獲取其中的類型。不理解沒事，繼續(xù)往下看：

---

let aa = Promise.resolve(Promise.resolve(Promise.resolve('hello world')))

還是這段代碼

我們想設(shè)置一個別名 cc 的類型為 aa 的Promise異步操作返回值的類型

該怎么做？

或許有人認(rèn)為，直接設(shè)置 string 類型不就好了：

let aa = Promise.resolve(Promise.resolve(Promise.resolve('hello world')))
type cc = string;

但這樣真的好嗎，很多請求或者異步操作返回值可能都是不固定，當(dāng)然，除非你定死它返回的必須是string類型。如果這樣或許你真的不需要Awaited了。

---

進(jìn)行下面內(nèi)容開始之前，你腦海中需要有一個印象：

let aa = Promise.resolve(Promise.resolve(Promise.resolve('hello world')))
type cc = typeof aa 

其中cc的類型為 Promise<string>,這很重要。=所以，看到這里，我們要做的就是取出Promise中的string（也可能是其他，總之是尖括號里的內(nèi)容）。=

推薦你每一步都手動操作一下，地址：typescript在線運(yùn)行

---

接下來使用另一種方法：

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需要一個類型，所以我們需要一個關(guān)鍵字typeof獲取aa的類型。

既然typeof aa 就表示類型，為什么還要Awaited<>:

• 上文說了，typeof aa 會返回Promise<string>，而這篇文章主要講的內(nèi)容就是獲取異步操作返回值的類型。

看一個例子：

type aa = Promise<Promise<Promise<string>>>
type cc = Awaited<aa>

如果 aa 是類型，則我們可以直接使用 Awaited<aa>，我們cc的類型為string類型。