TypeScript で ES6 Promises を使う

TypeScript は JavaScript のスーパーセットであり、静的型付けなどの機能を提供します。ES6 Promises は JavaScript の非同期処理を扱うための強力なツールです。このガイドでは、TypeScript でネイティブ ES6 Promises を効果的に使う方法を解説します。

TypeScript プロジェクトの設定

• tsconfig.json の設定
  

  {
      "compilerOptions": {
          "target": "es6"
      }
  }
  

  これにより、TypeScript コンパイラは ES6 をターゲットとしてコンパイルします。

Promise の宣言と使用

• Promise の処理
  

  myPromise
      .then(value => {
          console.log(value); // 'Promise resolved!'
      })
      .catch(error => {
          console.error(error);
      });
  

  • .then(): Promise が解決されたときに実行されるコールバック関数。

• const myPromise: Promise<string> = new Promise((resolve, reject) => {
      // 非同期処理
      setTimeout(() => {
          resolve('Promise resolved!');
      }, 1000);
  });
  

  • Promise<string>: Promise オブジェクトが解決されたときに string 型の値を返すことを示します。

Async/Await の活用

• Async/Await を使うと、非同期処理を同期的に記述できます
  

  async function fetchData(): Promise<string> {
      const response = await fetch('https://api.example.com/data');
      const data = await response.   json();
      return data.message;
  }
  
  fetchData()
      .then(   message => console.log(message))
      .catch(error => console.error(error));
  

重要なポイント

• エラーハンドリング
  .catch() メソッドを使ってエラーを適切に処理しましょう。
• 非同期処理の簡潔な記述
  Async/Await を使うと、非同期処理を同期的なコードのように記述できます。これにより、コードが読みやすくなり、保守性が向上します。
• 型安全
  TypeScript の型システムにより、Promise の型を明確に定義できます。これにより、コンパイル時にエラーを検出でき、コードの品質が向上します。

// TypeScript でネイティブ ES6 Promises を使う
// TypeScript における Promise の宣言と使用
const myPromise: Promise<string> = new Promise((resolve, reject) => {
  // 非同期処理
  setTimeout(() => {
    resolve('Promise resolved!');
  }, 1000);
});

myPromise
  .then(value => {
    console.log(value); // 'Promise resolved!'
  })
  .catch(error => {
    console.error(error);
  });

// Async/Await を使った非同期処理の簡潔な記述
async function fetchData(): Promise<string> {
  const response = await fetch('https://api.example.com/data');
  const data = await response.   json();
  return data.message;
}

fetchData()
  .then(   message => console.log(message))
  .catch(error => console.error(error));

コードの説明

1. • new Promise((resolve, reject) => { ... }): Promise オブジェクトを生成し、非同期処理を resolve または reject で完了させます。
2. • async function fetchData(): Promise<string>: 非同期関数を定義します。
   • await fetch('https://api.example.com/data'): fetch の結果を待つ。
   • await response.json(): response.json() の結果を待つ。
   • Async/Await を使うと、非同期処理を同期的なコードのように記述でき、コードが読みやすくなります。

ポイント

• Async/Await を効果的に使って、非同期処理を簡潔に記述しましょう。
• TypeScript の型システムにより、Promise の型を明確に定義できます。

TypeScript で ES6 Promises を扱う際に、いくつかの代替的なアプローチがあります。以下に、一般的な手法をいくつか紹介します。

const promise1 = new Promise<string>((resolve) => setTimeout(() => resolve('Promise 1'), 1000));
const promise2 = new Promise<number>((resolve) => setTimeout(() => resolve(2), 2000));

Promise.all([promise1, promise2])
  .then((values) => {
    console.log(values); // ['Promise 1', 2]
  })
  .catch((error) => {
    console.error(error);
  });

Promise.race
複数の Promise を同時に処理し、最初に解決または拒否された Promise の結果を取得します。

const promise1 = new Promise<string>((resolve) => setTimeout(() => resolve('Promise 1'), 1000));
const promise2 = new Promise<number>((resolve, reject) => setTimeout(() => reject('Promise 2 failed'), 2000));

Promise.race([promise1, promise2])
  .then((value) => {
    console.log(value); // 'Promise 1'
  })
  .catch((error) => {
    console.error(error); // 'Promise 2 failed'
  });

async/await with Error Handling
try...catch ブロックを使用して、非同期処理中のエラーを適切にキャッチできます。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error   );
  }
}

Custom Promise Chaining
Promise をチェーンして、複雑な非同期処理を表現できます。

function step1(): Promise<string> {
  return new Promise((resolve) => setTimeout(() => resolve('Step 1'), 1000));
}

function step2(result: string): Promise<number> {
  return new Promise((resolve) => setTimeout(() => resolve(parseInt(result) + 1), 1000));
}

step1()
  .then(step2)
  .then((result) => console.log(result))
  .catch((error) => console.error(error));