TypeScript 异步编程：完整指南

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

异步编程是现代 Web 开发中的关键概念之一。如果你刚开始学习 TypeScript，理解如何处理异步代码将为你打开创建快速、响应式应用的大门。在本指南中，我们将深入讲解 TypeScript 异步编程的基础知识：从简单的回调函数到现代的 async/await，并重点介绍 TypeScript 提供的强类型化。

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

在同步编程中，代码按顺序执行：每个后续操作都要等待前一个操作完成。例如，如果需要从服务器加载数据，这可能会导致界面“卡死”。异步编程允许在后台运行耗时操作（API 请求、文件读取、定时器），而不会阻塞主执行线程。TypeScript 作为 JavaScript 的超集，完全支持异步模式，并为其添加了强大的类型系统。

Promise：TypeScript 异步的基础

Promise 是一个表示异步操作结果的对象，它可以处于三种状态之一：pending（等待中）、fulfilled（已成功完成）或 rejected（已失败）。在 TypeScript 中，我们可以指定 Promise 返回的数据类型，从而使代码更具可预测性。

创建带有类型化的 Promise 示例：

// 返回 Promise 类型的函数\nfunction fetchUserData(userId: number): Promise<string> {\n    return new Promise((resolve, reject) => {\n        setTimeout(() => {\n            if (userId > 0) {\n                resolve(`用户 ID ${userId} 的数据`);\n            } else {\n                reject(new Error("用户 ID 无效"));\n            }\n        }, 1000);\n    });\n}\n\n// 使用 Promise\nfetchUserData(123)\n    .then((data: string) => {\n        console.log(data); // "用户 ID 123 的数据"\n    })\n    .catch((error: Error) => {\n        console.error(error.message);\n    });

请注意：我们明确指定了 Promise 返回 string，并且在 .then() 中参数 data 的类型也是 string。这有助于在编译阶段避免错误。

Promise 链与错误处理

Promise 可以链接起来，将一个异步操作的结果传递给另一个。TypeScript 会在每一步自动推断类型。

Promise 链示例：

interface User {\n    id: number;\n    name: string;\n}\n\nfunction getUser(id: number): Promise<User> {\n    return new Promise((resolve) => {\n        setTimeout(() => resolve({ id, name: "安娜" }), 500);\n    });\n}\n\nfunction getPosts(userId: number): Promise<string[]> {\n    return new Promise((resolve) => {\n        setTimeout(() => resolve(["帖子 1", "帖子 2"]), 500);\n    });\n}\n\n// 调用链\ngetUser(1)\n    .then((user: User) => {\n        console.log(`用户：${user.name}`);\n        return getPosts(user.id); // 返回一个新的 Promise\n    })\n    .then((posts: string[]) => {\n        console.log(`帖子：${posts.join(", ")}`);\n    })\n    .catch((error: Error) => {\n        console.error("错误：", error.message);\n    });

如果在任何阶段发生错误，执行将跳转到最近的 .catch()。这是 Promise 相对于回调函数的主要优势之一——集中式错误处理。

Async/await：优雅的异步语法

async/await 语法使异步代码看起来像同步代码，从而简化了阅读