【超便利】TypeScriptでPromiseを使いこなして、非同期処理をもっとスムーズに！

2024-05-22

TypeScript でネイティブ ES6 プロミスを使用する方法

このチュートリアルでは、TypeScript でネイティブ ES6 プロミスを使用する方法を説明します。 ES6 プロミスは、非同期操作を処理するための強力なツールであり、TypeScript での使用はさらに簡単です。

前提知識

このチュートリアルを始める前に、以下の知識が必要です。

TypeScript の基本
ES6 プロミスの基本

手順

@types/es6-promise パッケージをインストールする

TypeScript でネイティブ ES6 プロミスを使用するには、まず @types/es6-promise パッケージをインストールする必要があります。これは、TypeScript コンパイラが ES6 プロミスの型を認識できるようにするためです。

npm install --save @types/es6-promise

Promise を使用する

@types/es6-promise パッケージをインストールしたら、TypeScript コードで Promise を通常どおりに使用できます。次の例は、非同期操作を実行し、その結果をログに記録する方法を示しています。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() > 0.5) {
      resolve('Success!');
    } else {
      reject(new Error('Failure'));
    }
  }, 2000);
});

promise.then(result => {
  console.log(result);
}).catch(error => {
  console.error(error);
});

async/await を使用する

TypeScript では、async/await キーワードを使用して、Promise をより簡単に使用できます。次の例は、async/await を使用して前と同じことを行う方法を示しています。

(async () => {
  try {
    const result = await promise;
    console.log(result);
  } catch (error) {
    console.error(error);
  }
})();

補足

@types/es6-promise パッケージは、TypeScript 2.1 以降で使用できます。
ネイティブ ES6 プロミスを使用する場合は、ポリフィルが必要ないことに注意してください。

TypeScript でネイティブ ES6 プロミスを使用することは、非同期操作を処理するための強力で簡単な方法です。このチュートリアルで説明した手順に従うことで、TypeScript コードで Promise を簡単に使い始めることができます。

非同期操作を実行し、その結果をログに記録する

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() > 0.5) {
      resolve('Success!');
    } else {
      reject(new Error('Failure'));
    }
  }, 2000);
});

promise.then(result => {
  console.log(result);
}).catch(error => {
  console.error(error);
});

説明:

このコードは、Promise コンストラクタを使用して新しい Promise オブジェクトを作成します。
setTimeout 関数は、2 秒後に非同期操作を実行するようにスケジュールされます。
非同期操作が成功した場合、resolve 関数は "Success!" 文字列を解決します。
非同期操作が失敗した場合、reject 関数は新しい Error オブジェクトを拒否します。
then メソッドは、Promise が解決されたときに呼び出されるコールバック関数を指定します。

(async () => {
  try {
    const result = await promise;
    console.log(result);
  } catch (error) {
    console.error(error);
  }
})();

このコードは、async キーワードを使用して非同期関数を作成します。
await キーワードは、Promise が解決されるのを待機します。
try/catch ブロックは、Promise が解決または拒否されたときにエラーを処理します。

API から非同期データをフェッチする

(async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
})();

このコードは、fetch APIを使用して https://jsonplaceholder.typicode.com/todos/1 から非同期データをフェッチします。
response.json() メソッドは、JSON 応答を JavaScript オブジェクトに変換します。
console.log ステートメントは、フェッチされたデータをコンソールに記録します。

TypeScript でネイティブ ES6 プロミスを使用するその他の方法

Promise ユーティリティ関数を使用する

TypeScript には、Promise を操作するためのいくつかのユーティリティ関数があります。これらの関数は、Promise の作成、結合、およびチェーン化を簡素化できます。

Promise.resolve(value): 指定された値を解決する新しい Promise オブジェクトを作成します。
Promise.all(promises): 指定された配列内のすべての Promise が解決されるのを待機し、それらの解決値の配列を返します。

例:

const promise1 = Promise.resolve('Success!');
const promise2 = Promise.reject(new Error('Failure'));

Promise.all([promise1, promise2]).then(results => {
  console.log(results);
}).catch(error => {
  console.error(error);
});

Promise チェーンは、Promise を連続して実行する方法です。これは、複数の非同期操作を順番に実行する必要がある場合に役立ちます。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success!');
  }, 2000);
});

promise.then(result => {
  console.log(result);
  return result + '!';
}).then(newResult => {
  console.log(newResult);
});

Promise.then() メソッドには、解決値または拒否値に加えて、オプションの第 2 引数を渡すことができます。この引数は、Promise が拒否された場合に呼び出されるコールバック関数です。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() > 0.5) {
      resolve('Success!');
    } else {
      reject(new Error('Failure'));
    }
  }, 2000);
});

promise.then(result => {
  console.log(result);
}, error => {
  console.error(error);
});

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() > 0.5) {
      resolve('Success!');
    } else {
      reject(new Error('Failure'));
    }
  }, 2000);
});

promise.then(result => {
  console.log(result);
}).catch(error => {
  console.error(error);
});