如何在 Typescript 中向 Express.Request 添加自定义属性？

Question

对不起，我的英语水平很差。

我使用express-generator-typescript 创建了一个新项目。

$ npx express-generator-typescript --use-yarn

我想为我的自定义中间件向Express.Request 添加其他属性。 所以我在./src 中创建了types/myRequest.d.ts 并将代码保存如下：

// myRequest.d.ts
declare namespace Express {
  interface Request {
    myProp?: boolean;
  }
}

我在tsconfig.json 中取消了“typeRoots”的注释并添加了“./node_modules/@types”、“./src/types”，我尝试通过在./src/routes/api.ts 中创建一些中间件来使用添加的属性。这是完整的代码：

// api.ts
import { NextFunction, Request, Response, Router } from "express";
import userRouter from "./user-router";

function myMiddleware(req: Request, _res: Response, next: NextFunction) {
  req.myProp = true;
  next();
}

// Export the base-router
const baseRouter = Router();

// Setup routers
baseRouter.use("/users", myMiddleware, userRouter);

// Export default.
export default baseRouter;

这构建得很好，VS Code 中的 IntelliSense 也可以正常工作并且没有显示任何问题。但是，当我运行 yarn start:dev 时，出现以下错误：

/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:828
    return new TSError(diagnosticText, diagnosticCodes);
           ^
TSError: ⨯ Unable to compile TypeScript:
src/routes/api.ts:5:7 - error TS2339: Property 'myProp' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.

5   req.myProp = true;
        ~~~~~~

    at createTSError (/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:828:12)
    at reportTSError (/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:832:19)
    at getOutput (/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:1022:36)
    at Object.compile (/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:1326:43)
    at Module.m._compile (/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:1458:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Object.require.extensions.<computed> [as .ts] (/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:1462:12)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  diagnosticCodes: [ 2339 ]
}
[nodemon] app crashed - waiting for file changes before starting...

所以我不能在开发状态下进行开发。当然，如果我不使用额外的属性，开发状态也是可用的并且可以正常工作。

我认为express-generator-typescript 本身有一些设置。因为在tsconfig.json 中更改“typeRoots”不会改变结果。但是没找到。

提前谢谢你。

Answer 1

每当我遇到此类问题时，我通常使用“声明模块”将属性添加到 Express 的“请求”接口，而不是在命名空间中声明它们。这样我通常不需要更改 tsconfig 中的任何内容，也不需要添加任何 .d.ts 文件。

将这些行添加到您的 api.ts 代码中（请注意，在大多数情况下，您需要引用 express-serve-static-core 模块，因为这是声明 Request 接口的地方）：

declare module "express-serve-static-core" {
  interface Request {
    myProp?: boolean;
  }
}

完整文件：

// api.ts
import { NextFunction, Request, Response, Router } from "express";
import userRouter from "./user-router";

declare module "express-serve-static-core" {
  interface Request {
    myProp?: boolean;
  }
}

function myMiddleware(req: Request, _res: Response, next: NextFunction) {
  req.myProp = true;
  next();
}

// Export the base-router
const baseRouter = Router();

// Setup routers
baseRouter.use("/users", myMiddleware, userRouter);

// Export default.
export default baseRouter;

通常这应该使您新添加的属性也可以在其他文件中使用，但您当然可以导出操纵的请求接口以确保安全。

Answer 2

我给你推荐一个方法，希望对你有帮助。

在文件 ./src/routes/api.ts 中添加此代码（在导入下）

declare global {
     namespace Express {
         interface Request {
             myProp?: boolean;
         }
     }
}

然后再次运行（似乎不需要types/myRequest.d.ts文件）