如何使用TypeScript正确创建Express.js自定义请求接口？及相关类型错误的排查解决

看起来你遇到的问题是TypeScript没有正确识别自定义AuthRequest接口和Express原生Request类型的兼容性，导致错误地将你的中间件函数匹配到了app.use的另一个重载（接受路径参数的那个），从而抛出了类型不匹配的错误。

解决方案：扩展Express的Request类型（推荐） #

Express的TypeScript类型支持通过声明合并来扩展原生的Request接口，这样所有使用Request的地方都会自动包含你的自定义属性，无需单独声明自定义接口。

修改interface.ts文件：

import { Request } from "express";

// 定义你的User类型
interface User {
  id: number;
}

// 扩展Express的Request接口
declare module 'express' {
  interface Request {
    user: User;
  }
}

修改index.ts文件：

直接使用Express原生的Request类型即可，TypeScript会自动识别到扩展后的user属性：

import express, { Request, Response, NextFunction } from "express";
const app = express();
const port = 8080;

app.use((req: Request, res: Response, next: NextFunction) => {
  // 现在可以安全地赋值和访问req.user了
  req.user = { id: 123 };
  next();
});

app.listen(port, () => {
  console.log(`App started on port ${port}`);
});

为什么原来的方法会报错？ #

你之前创建的AuthRequest虽然继承了Request，但TypeScript的类型系统并没有把它和Express中间件期望的原生Request类型做自动兼容。当你把req声明为AuthRequest时，TypeScript无法匹配到正确的app.use重载（中间件函数的重载），反而错误地匹配到了接受路径参数（PathParams，可以是字符串/正则数组）的重载，所以才会抛出"缺少数组方法"的奇怪错误。

备选方案：使用类型断言（不推荐） #

如果你坚持要使用自定义的AuthRequest接口，可以在中间件里用类型断言来告诉TypeScriptreq确实是AuthRequest类型：

app.use((req: Request, res: Response, next: NextFunction) => {
  const authReq = req as AuthRequest;
  authReq.user = { id: 123 };
  next();
});

不过这种方式不够优雅，每次使用都需要断言，不如扩展原生类型方便。

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