💨

TypeScriptのAwaited<T>を知ろう

に公開
TypeScript
frontend
awaited
tech

概要

別記事を書くにあたりAwaited<T>を理解しようの会

Awaited<T>とは

ユーティリティ型の1つ。
async()のawaitとかPromiseの.then()を型にしたもので、特にPromise<T>を再帰的に解決したい時に使う。
参考: https://www.typescriptlang.org/docs/handbook/utility-types.html#awaitedtype

Awaited<string> みたいな書き方もできるが、実用的にはAwaited<Promise<string>>みたいな書き方をすることが多い。

type Hoge = Awaited<Promise<string>>; // string
let hoge: Hoge;

new Promise<string>((resolve) => {
  resolve("ほげ");
}).then((message) => (hoge = message));

のようにPromiseで解決されたものの値と格納する型として使用。
また、以下のようにPromise<T>が複数ネストされている場合はそれを全て解決した時の型が当てはまる。

Promise<T>がネストされている場合
type Hoge = Awaited<Promise<Promise<string>>>; // string
let hoge: Hoge;

new Promise<Promise<string>>((resolve) => {
  resolve(new Promise<string>((resolve2) => resolve2("ほげ")));
}).then((message) => message.then((str) => (hoge = str)));

使用例

上記の例だと type Hoge = string; でよさそうだが、以下のようにAPIとかを使った場合に RetuenType<T>を利用してあげることで便利になる。

type Hoge = Awaited<ReturnType<typeof fetchName>>;
async function fetchName(): Promise<string> {
  return "ほげ";
}

async function main() {
  const hoge: Hoge = await fetchName();
}

ちなみに、 async await を以下のようにエラーになるので注意。

type Hoge = Awaited<ReturnType<typeof fetchName>>;
async function fetchName(): Promise<string> {
  return "ほげ";
}

const hoge: Hoge = fetchName(); // 🚫awaitがないとPromise<string>が格納されるのでNG

Discussion