TypeScript と Promise の使い方

TypeScript は、静的型を追加することで JavaScript 開発を強化します。非同期コードを使用する場合、将来完了する操作を処理するために Promise が使用されます。TypeScript は、型の安全性と明確さを備えた Promise を管理するためのツールを提供します。このガイドでは、基本的な使用方法から高度なシナリオまで、TypeScript で Promise を操作する方法について説明します。

約束を理解する

promise は、非同期操作の最終的な完了または失敗を表すオブジェクトです。操作の結果またはエラーを処理するメソッドを提供します。TypeScript では、promise を型指定して、期待されるデータ型で解決されるようにすることができます。

Promiseの基本的な使い方

TypeScript で Promise を作成して使用するのは簡単です。以下は文字列で解決する Promise の例です。

function fetchData(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data); // Outputs: Data fetched successfully!
}).catch((error) => {
  console.error("Error:", error);
});

この例では、fetchData は文字列で解決される Promise を返します。then メソッドは解決された値を処理し、catch はエラーを処理します。

Async/Await による Promise の処理

TypeScript は async/await 構文をサポートしており、これにより Promise をより読みやすく操作できます。Promise で async/await を使用する方法は次のとおりです。

async function fetchDataAsync(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // Outputs: Data fetched successfully!
  } catch (error) {
    console.error("Error:", error);
  }
}

processData();

この例では、fetchDataAsync 関数は async として宣言されており、await キーワードを使用して、promise が解決するまで待機できます。エラーは try/catch ブロックを使用してキャッチされます。

ジェネリックによる Promise の型付け

TypeScript では、ジェネリックを使用して、Promise が解決するデータの型を指定できます。これにより、コード全体で型が正しく管理されます。以下は、型指定された Promise の例です。

interface User {
  id: number;
  name: string;
}

function fetchUser(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ id: 1, name: "John Doe" });
    }, 1000);
  });
}

fetchUser().then((user) => {
  console.log(user.id, user.name); // Outputs: 1 John Doe
}).catch((error) => {
  console.error("Error:", error);
});

この例では、fetchUser は User オブジェクトで解決される Promise を返します。型はジェネリックを使用して指定され、型の安全性が保証されます。

TypeScript で API 呼び出しを使用して Promise を使用する

Promise は、非同期データ取得を処理するために API 呼び出しでよく使用されます。TypeScript の型システムは、API からの応答の管理に役立ちます。

async function getUserData(userId: number): Promise {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error("Network response was not ok.");
  }
  const data: User = await response.json();
  return data;
}

getUserData(1).then((user) => {
  console.log(user);
}).catch((error) => {
  console.error("Error:", error);
});

この例では、fetch を使用して API 呼び出しを行い、promise と async/await を使用して応答を処理する方法を示します。応答は User として型指定され、型の安全性が確保されます。

結論

TypeScript で Promise を使用すると、非同期操作の型の安全性と明確さが向上します。TypeScript の型付けシステム、async/await 構文、ジェネリックを使用することで、開発者は Promise を効果的に管理し、より信頼性の高いアプリケーションを構築できます。

typescript promises async await fetch types async/await typings api handle resolve reject code errors