如何使用 TypeScript 和 Promises

TypeScript 通过添加静态类型增强了 JavaScript 开发。使用异步代码时，承诺用于处理将来完成的操作。TypeScript 提供了管理承诺的工具，确保类型安全且清晰。本指南探讨了如何在 TypeScript 中使用承诺，从基本用法到高级场景。

理解 Promise

promise 是一个表示异步操作最终完成或失败的对象。它提供处理操作结果或错误的方法。在 TypeScript 中，可以对承诺进行类型化，以确保它们以预期的数据类型解析。

Promises 的基本用法

在 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 处理 Promises

TypeScript 支持 async/await 语法，该语法提供了一种更易读的方式来处理 Promise。以下是如何将 async/await 与 Promise 结合使用：

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 关键字等待承诺解决。使用 try/catch 块捕获错误。

使用泛型定义 Promises

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 调用使用 Promises

Promises 通常与 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 并构建更可靠的应用程序。