🎋

TypeScriptのPromise<T>について知ろう

2025/07/04に公開

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

 Promise<T>とはPromiseの型を指定する書き方。

TにはPromiseが成功した際に解決される型を格納する。
と言っても若干 🤔 なのでまずはPromiseから。

 Promiseとは非同期処理でまだ結果がわからない値を管理するもの。

一般的にコードを上から順に処理を行うが、APIの通信などで時間がかかる処理が走るとその後もズルズル待たなきゃいけなくなってしまうので非同期処理として並列で処理するようにする。

参考: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
Promiseには以下の状態がある。
待機状態(pending) → 初期状態、まだ成功も失敗もしていない状態
履行状態(fulfilled) → 成功した状態
拒否状態(rejected) → 失敗した状態
で以下のように書く。
// Promiseを使うために new Promise() を使用
new Promise((resolve, reject) => {
  // APIの通信とかの非同期処理を記載
  const success = true;
  if (success) {
    // fulfilled状態であることを伝えるためにresolve()関数を使用
    resolve("データ取得に成功しました！");
  } else {
    // rejected状態であることを伝えるためにreject()関数を使用
    reject(new Error("データの取得に失敗しました。"));
  }
})
  .then((message) => { // resolve()関数が呼ばれた時に実行される
    console.log("成功:", message); // messageには「データ取得に成功しました！」が入る
  })
  .catch((error) => { // reject()関数が呼ばれた時に実行される
    console.error("失敗:", error.message); // error.messageには「データの取得に失敗しました。」が入る
  });

 (再び)Promise<T>とは例として
type Hoge = { name: string; message: string };

new Promise((resolve, reject) => {
  const hoge: Hoge = { name: "ほげ太郎", message: "こんにちは。" };
  const success = true;
  if (success) {
    resolve(hoge);
  } else {
    reject(new Error("データの取得に失敗しました。"));
  }
})
  .then((data) => {
    console.log("成功:", data);
  })
  .catch((error) => {
    console.error("失敗:", error.message);
  });
のような処理がある場合、fulfilledされた時(つまり処理が成功した時)にHoge型の定数 hoge が返却されるので
type Hoge = { name: string; message: string };

new Promise<Hoge>((resolve, reject) => {
  const hoge: Hoge = { name: "ほげ太郎", message: "こんにちは。" };
  const success = true;
  if (success) {
    resolve(hoge);
  } else {
    reject(new Error("データの取得に失敗しました。"));
  }
})
  .then((data) => {
    console.log("成功:", data);
  })
  .catch((error) => {
    console.error("失敗:", error.message);
  });
のように new Promise<Hoge>() という形にして安全性を担保する。

概要

Promise<T>とは

Promiseとは

(再び)Promise<T>とは

Discussion