TypeScript Express 路由错误？两种解决方案

2025-01-09 20:51:10

TypeScript 应用路由构建错误解析

当使用 TypeScript 构建 Node 应用，特别是涉及 Express 路由时，开发者可能会遇到编译或运行时错误。本文探讨路由文件中常见的构建问题，以及如何有效地解决它们。

常见问题：路由处理函数类型不匹配

许多构建问题源于 TypeScript 编译器对函数类型的严格检查。上述代码中的问题就体现了这一点：router.post() 函数期待接收一个特定类型的处理函数，而提供的函数与其不完全匹配，TypeScript就会发出警告，这种警告可能在开发阶段被忽略，却可能在构建阶段导致错误。

错误的关键点在于异步函数返回值处理。在router.post()等方法中，路由处理函数期望返回void或Promise<void>。然而，res.status(200).json({})并不会显式返回一个 Promise，虽然看起来函数内并没有 return，且本地测试一切正常，TypeScript 并不能智能的推断返回值为 Promise<void>。当构建后，运行打包代码时，就可能会触发报错，因为构建阶段会更严格的校验。

解决方案一：显式返回 Promise

最直接的方法就是让路由处理函数明确返回 Promise，这通常通过 async 来实现。如果路由逻辑不需要返回具体的值，使用 Promise<void>是合适的选择，让 TypeScript 编译器能够识别该函数满足 Express 的类型签名要求。

import express, { NextFunction, Request, Response } from "express";

const router = express.Router();

router.post(
    "/product",
    async (req: Request, res: Response, next: NextFunction): Promise<void> => {
        return res.status(200).json({});
    }
);

export default router;

此方案不仅修复了类型不匹配的问题，还使代码更清晰地表达了异步性质。显式使用 Promise<void>，清楚地声明了函数返回的 promise 是不会返回任何内容的，增强了代码的可读性，有助于团队维护和代码审查。

解决方案二：隐式返回 Promise

如果确认路由处理函数的流程中，返回 Promise 不可避免，并且符合 void 返回值时。可以直接移除 Promise<void> 注解。通过 async 关键字标注路由函数，Typescript 会将其转化为一个返回 Promise 的异步函数。函数内使用 await 关键字（如果有），会将异步操作串联起来，确保代码按预期执行，从而间接处理了函数返回的 Promise，这是一种更加简洁的解决方案。

import express, { NextFunction, Request, Response } from "express";

const router = express.Router();

router.post(
    "/product",
    async (req: Request, res: Response, next: NextFunction) => {
        return res.status(200).json({});
    }
);

export default router;

这种写法对初学者可能稍有不友好，但其代码更为简洁。需要确保开发者对异步函数和 Promise 有基本的理解。