64. Promise<T> — 非同期の結果の型

Promise<T> は「あとで T 型の値が手に入る」ことを表す型です。サーバーへの問い合わせやタイマーのように時間のかかる処理は、結果そのものではなく Promise<string> のような形で返ってきます。中身の値は .then(function (value) { ... }) のコールバックで受け取ります。

実務の非同期処理(API呼び出し、ファイル読み込み、DBアクセス)は戻り値がほぼすべて Promise です。.then に渡した関数の引数には中身の型がそのまま流れてくるので、Promise<string> なら string として補完もチェックも効きます。

つまずきポイントは実行順序です。Promise を受け取った瞬間に結果があるわけではなく、.then の中身は後から呼ばれます。サンプルでは、コードの最後にある console.log が最初に表示されることを確認してください。

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

TypeScript

function fetchUserName(): Promise<string> {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve("Taro");
    }, 100);
  });
}

// .then の引数 userName は string と推論される
fetchUserName()
  .then(function (userName) {
    console.log("取得した名前: " + userName);
    return userName.length; // 次の .then には number が流れる
  })
  .then(function (textLength) {
    console.log("文字数: " + textLength);
  });

console.log("先にここが表示される");

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

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

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