65. async関数の型付け

関数の前に async を付けると、その関数の戻り値は必ず Promise に包まれます。return firstScore + secondScore と数値を返しても、呼び出し側から見た型は Promise<number> です。async 関数の中では await を使って、Promise の中身を普通の値として取り出せます。

前のレッスンの .then 連鎖と同じ処理を、上から下へ読める形で書けるのが async/await の利点で、実務の非同期コードはほぼこの形で書きます。await fetchScore() の結果は number になるので、そのまま足し算や変数への代入に使えます。

つまずきポイントは、await が async 関数の中でしか使えないことです。プログラムの一番外側では await を書けない環境が多いため、async function main() { ... } を定義して最後に main(); と呼び出す形が定番です。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

function fetchScore(): Promise<number> {
  return Promise.resolve(80);
}

// async 関数の戻り値は必ず Promise になる
async function calcTotal(): Promise<number> {
  const firstScore = await fetchScore(); // await で中身の number を取り出す
  const secondScore = await fetchScore();
  return firstScore + secondScore;
}

async function main(): Promise<void> {
  const total = await calcTotal();
  console.log("合計: " + total);
}

main();

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗