TypeScript 异步编程：初学者完全指南

TypeScript 异步编程：初学者完全指南

现代 Web 开发离不开对异步编程的理解。TypeScript 作为 JavaScript 的超集，为处理异步代码提供了强大的工具，使其更加安全且可预测。在本指南中，我们将深入解析 TypeScript 异步编程的核心概念，从基础开始，逐步过渡到实际案例。

什么是异步编程，为什么需要它？

在同步编程中，代码严格按照顺序执行：每个后续操作都必须等待前一个操作完成。这在处理长时间运行的任务（如服务器请求、文件读取或定时器）时会引发问题。异步编程允许这些任务在后台执行，而不会阻塞主执行线程。

TypeScript 为异步 JavaScript 增加了严格的类型检查，有助于在编译时捕获错误。例如，类型化的 Promise 可以让你确切知道异步函数将返回什么类型的数据。

// 同步代码 - 阻塞执行function fetchData(): string {  // 长时间操作  return "data";}

// 异步代码 - 不阻塞async function fetchDataAsync(): Promise<string> {  const response = await fetch('/api/data');  return response.json();}

基础：回调、Promise 与 Async/Await

历史上，JavaScript 的异步始于作为参数传递的回调函数。然而，这种方法导致了"回调地狱"——难以理解和调试的深层嵌套结构。

Promise 通过提供可链式调用的语法解决了这个问题。Promise 是一个代表异步操作结果的对象，它可以处于三种状态之一：等待（pending）、已完成（fulfilled）或已拒绝（rejected）。

// TypeScript 中的 Promise 示例function loadUser(id: number): Promise<User> {  return new Promise((resolve, reject) => {    setTimeout(() => {      if (id > 0) {        resolve({ id, name: "Alice" });      } else {        reject(new Error("Invalid user ID"));      }    }, 1000);  });}

// 使用方法loadUser(1)  .then(user => console.log(user))  .catch(error => console.error(error));

Async/Await 是 Promise 的语法糖，它使异步代码看起来像同步代码。函数前的 async 关键字表示该函数返回一个 Promise，而 await 会暂停执行直到获取到结果。

// TypeScript 中的 Async/Awaitasync function getUserData(): Promise<void> {  try {    const user = await loadUser(1);    console.log(user.name); // "Alice"  } catch (error) {    console.error("加载错误:", error);  }}

getUserData();

在 TypeScript 中为异步函数添加类型

TypeScript 的主要优势之一是其严格的类型系统。对于异步函数，正确指定返回的 Promise 类型非常重要。如果函数返回一个字符串，类型应为 Promise<string>。TypeScript 编译器会检查你是否在获取结果之前就尝试使用它。

让我们看一个带类型的 API 请求示例：

interface Todo {  userId: number;  id: number;  title: string;  completed: boolean;}

async function fetchTodo(id: number): Promise<Todo> {  const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);  if (!response.ok) {    throw new Error(`HTTP error! status: ${response.status}`);  }  return await response.json() as Todo;}

// 带类型的使用async function displayTodo(): Promise<void> {  const todo = await fetchTodo