如何扩展 TypeScript 的类型声明？答案

【问题标题】：How to extend type declaration for TypeScript?如何扩展 TypeScript 的类型声明？
【发布时间】：2021-05-03 10:45:12
【问题描述】：

以下问题类似于： Extend Express Request object using Typescript

我几乎尝试了答案和 cmets 中列出的所有组合，但均未成功。由于那个已经超过 4 岁了，我想再次向社区提问：

在 Express 应用程序中，我将 user 属性附加到中间件 auth 中的请求对象。

// index.ts
import express, { Request, Response } from 'express'
.
.
app.get('/test', auth, (req: Request, res: Response) => {
    res.send(welcomeScreen(req.user?.client_name || ''))
})

我收到一个错误：

Property 'user' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs>'

这是意料之中的。因此，我想扩展 express.Request 对象的类型定义以接受我的 user 属性，假设在自定义 d.ts 文件中。但无论我如何尝试去做，我仍然得到同样的错误。 d.ts 文件的内容到底应该是什么？到目前为止，我最好的镜头是：

// custom.d.ts
namespace Express {
    export interface Request {
        user?: {}
    }
}

添加后，user 属性在 IDE 中被识别：

(property) Express.Request.user?: {} | undefined

但我仍然得到相同的编译时错误。我还需要更改tsconfig 吗？谢谢！

// tsconfig.json
{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "outDir": "./compiled",
        "rootDir": "./src",
        "strict": true,
        "moduleResolution": "node",
        "typeRoots": ["./types"],
        "esModuleInterop": true,       "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
    }
}

【问题讨论】：

这能回答你的问题吗？ Extend Express Request object using Typescript
可以分享一下ts配置文件吗？
“但我仍然遇到同样的运行时错误。”你的意思是编译时错误？并尝试不指定 typeRoots - 只需将其包含在 tsconfig.json 的“包含”的全局中？
我更正了这个问题，谢谢。这就是你的意思？"include": ["./types"]，好像不行
"include": "src" 文件夹，或者如果您的 index.ts 只是在项目根目录中，则将其完全关闭？我认为您不必为此指定 typeRoots。

标签： typescript express typescript-typings

【解决方案1】：

这是一个棘手的问题，因为有很多变化会产生相似的结果，但我认为这是正确的答案：

添加@types/express-serve-static-core，然后在 express-more.d.ts 文件中：

import { Express } from "express-serve-static-core";

declare global {
    namespace Express {
        interface Request {
            user?: {}
        }
    }
}

【讨论】：

谢谢杰森，很遗憾我没有工作。也许原因在其他地方，不在 d.ts 文件中？
你的 index.ts 中有import { Request } from "express";？
没错。我更新了描述。

【解决方案2】：

以下是适用于我们团队的解决方案：

// tsconfig.json
{
  "compilerOptions": {
...
    "typeRoots": [
      "@types",
      "node_modules/@types"
    ],
...
  }
}

// @types/express/index.d.ts
export { }

declare global {
    namespace Express {
        interface Request {
            user?: {}
        }
    }
}

最终按预期使用：

// src/index.ts
import express, { Request, Response } from 'express'
...
app.get('/test', auth, (req: Request, res: Response) => {
    res.send(welcomeScreen(req.user))
})

【讨论】：