TypeScript 中回调的类型化：如何为处理函数指定类型

如何停止对回调使用 any 并开始高效编码：TypeScript 中处理函数类型化的完整指南

您是否曾在方法参数中写过类似 callback: any 的代码？如果是——欢迎加入俱乐部。如果不是——您要么是天才，要么刚刚开始您的 TypeScript 之旅。开个玩笑。但每个玩笑都有一丝真理：根据 Stack Overflow 的数据，问题 "如何为函数回调定义类型（作为任意函数类型，而非通用 any）" 获得了数千次浏览。这并非偶然。

问题在于 any 就像一个黑洞：它会吞噬您代码的所有类型安全性。您会失去自动补全、参数检查以及在编译阶段捕获错误的能力。但最令人沮丧的是——将 any 用作回调类型会扼杀 TypeScript 本身的理念。让我们来探讨如何正确地为方法参数中的回调函数进行类型化，使代码既安全又优雅。

为什么 Function 并不比 any 好？

初学者的第一反应是使用内置类型 Function。毕竟，它是"任意函数"的类型，所以应该适用。但并非如此。Function 和 any 一样，是一个"垃圾"类型。它不提供任何关于函数签名的信息：函数接受多少个参数、返回什么、参数的类型是什么。您只是在告诉编译器："相信我，我知道我在做什么。"剧透：通常您并不知道。

// 不好：没有类型检查\nfunction processData(callback: Function) {\n    callback(42, "hello"); // 错误？谁知道呢\n}

采用这种方法，您会失去静态类型化的所有优势。让我们来纠正这一点。

步骤 1. 回调的基本类型化：简单明了

最简单且正确的方法是在参数中直接声明函数类型。为此，使用箭头语法 (参数) => 返回类型。这就是 TypeScript 中的 function type。

// 好：明确指定签名\nfunction fetchData(url: string, onSuccess: (data: string) => void): void {\n    // ... 一些逻辑\n    const result = "来自服务器的数据";\n    onSuccess(result);\n}\n\n// 使用——带有自动补全和检查\nfetchData("/api/users", (data) => {\n    console.log(data.toUpperCase()); // data 是 string，一切正常\n});

请注意返回类型中的 void。这意味着我们不期望回调返回任何特定值。如果回调返回了某些内容，它将被忽略。如果您期望一个结果，请使用具体类型。

步骤 2. 带多个参数的回调

通常回调接受多个参数。例如，错误处理程序或带数据的事件。这里同样简单——用逗号列出所有参数。

// 带错误和结果的回调类型\nfunction loadUser(\n    userId: number,\n    callback: (error: Error | null, user: { name: string; age: number } | null) => void\n): void {\n    // ... 加载逻辑\n    const user = { name: "安娜", age: 30 };\n    callback(null, user);\n}\n\n// 使用\nloadUser(42, (err, user) => {\n    if (err) {\n        console.error("错误:", err.message);\n        return;\n    }\n    if (user) {\n        console.log(`你好, ${user.name}!`);\n    }\n});

看到 TypeScript 如何自动提示 err 和 user 的类型了吗？这就是 回调函数的类型化 的实际应用。没有 any，没有魔法——只有严格的检查。

步骤 3. 为回调创建可复用的类型

如果同一回调类型在多个地方使用，无需每次都重复。将其提取到单独的 type alias 或 interface 中。这可以提高可读性并简化维护。

// 声明