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

Question

我对我糟糕的英语能力感到抱歉。

\n

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

\n

\n

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

\n

\n

我想Express.Request为我的自定义中间件添加其他属性。\n因此我创建types/myRequest.d.ts并./src放置并保存代码，如下所示：

\n

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

\n

我取消注释了“typeRoots”tsconfig.json并添加了“./node_modules/@types”、“./src/types”，并且我尝试通过在./src/routes/api.ts. 这是完整的代码：

\n

// api.ts\nimport { NextFunction, Request, Response, Router } from "express";\nimport userRouter from "./user-router";\n\nfunction myMiddleware(req: Request, _res: Response, next: NextFunction) {\n  req.myProp = true;\n  next();\n}\n\n// Export the base-router\nconst baseRouter = Router();\n\n// Setup routers\nbaseRouter.use("/users", myMiddleware, userRouter);\n\n// Export default.\nexport default baseRouter;\n

\n

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

\n

/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:828\n    return new TSError(diagnosticText, diagnosticCodes);\n           ^\nTSError: \xe2\xa8\xaf Unable to compile TypeScript:\nsrc/routes/api.ts:5:7 - error TS2339: Property \'myProp\' does not exist on type \'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>\'.\n\n5   req.myProp = true;\n        ~~~~~~\n\n    at createTSError (/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:828:12)\n    at reportTSError (/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:832:19)\n    at getOutput (/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:1022:36)\n    at Object.compile (/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:1326:43)\n    at Module.m._compile (/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:1458:30)\n    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)\n    at Object.require.extensions.<computed> [as .ts] (/home/me/dev/express-gen-ts/node_modules/ts-node/src/index.ts:1462:12)\n    at Module.load (node:internal/modules/cjs/loader:981:32)\n    at Function.Module._load (node:internal/modules/cjs/loader:822:12)\n    at Module.require (node:internal/modules/cjs/loader:1005:19) {\n  diagnosticCodes: [ 2339 ]\n}\n[nodemon] app crashed - waiting for file changes before starting...\n

\n

所以我无法在开发状态下进行开发。当然，如果我不使用其他属性，开发状态也可用并且工作正常。

\n

我觉得express-generator-typescript它本身就有一定的设定。因为更改“typeRoots”tsconfig.json不会改变结果。但我找不到它。

\n

先感谢您。

\n

Answer 1

每当遇到此类问题时，我通常使用“声明模块”向 Express 的“Request”接口添加属性，而不是在命名空间中声明它们。这样我通常不必更改 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;

通常，这应该使您新添加的属性也可以在其他文件中使用，但是为了安全起见，您当然可以导出操纵的 Request 接口。