如何使用箭头函数指定Express请求处理器的函数类型？

我在使用Express框架时，了解到可以给普通函数类型的请求处理器指定RequestHandler类型：

router.get("/", <RequestHandler> function (req, res, next) {
  // 处理请求逻辑
});

想知道能不能用箭头函数实现同样的类型指定？我知道可以逐个给参数指定类型，但这种方式有点繁琐：

router.get("/", (req: Request, res: Response, next: NextFunction) => {
  // 处理请求逻辑
});

于是尝试了下面的写法，结果每个参数都报出错误：

router.get("/", <RequestHandler>(req, res, next) => {
  // 处理请求逻辑
});

错误提示：

参数'req'隐式具有'any'类型。

问题原因与解决方案 #

之所以会报错，是因为TypeScript中直接用<RequestHandler>包裹箭头函数的参数列表时，TS会把<RequestHandler>识别为泛型参数，而不是函数类型断言，因此无法从RequestHandler自动推导参数的类型，导致参数隐式为any。

以下是两种正确的实现方式：

1. 使用as关键字做类型断言（推荐）

把类型断言放在箭头函数表达式的末尾，TS会根据RequestHandler的定义自动推导参数类型：

router.get("/", (req, res, next) => {
  // 处理请求逻辑
} as RequestHandler);

2. 先定义带类型的变量，再传入路由

将箭头函数赋值给一个指定了RequestHandler类型的变量，参数会自动继承类型：

const handler: RequestHandler = (req, res, next) => {
  // 处理请求逻辑
};

router.get("/", handler);

如果一定要用尖括号的断言语法，需要用括号包裹整个箭头函数，明确这是类型断言而非泛型：

router.get("/", <RequestHandler>((req, res, next) => {
  // 处理请求逻辑
}));

不过这种写法可读性不如as语法，一般不推荐。

内容的提问来源于stack exchange，提问作者Daniel Cajas