为无类型旧JS库扩展Express请求接口及node-vbauth TS类型问题

我来帮你搞定这个TypeScript类型扩展的问题——之前我也遇到过类似第三方库缺类型的情况，按下面的步骤来应该就能解决：

1. 编写正确的自定义类型文件 (custom.d.ts) #

首先，你需要在项目里创建一个类型定义文件（比如放在src/types/custom.d.ts），关键是要在declare module 'express'块内扩展Request接口，这样TypeScript才会把它合并到Express的原有类型里，而不是创建一个新的独立接口：

// src/types/custom.d.ts
import type { Request } from 'express';

declare module 'express' {
  // 根据node-vbauth实际返回的vbuser结构来定义属性，不确定的话可以先用any过渡
  interface Request {
    vbuser?: {
      id: string;
      username: string;
      email?: string;
      // 这里添加你实际用到的其他字段
    };
  }
}

如果暂时不确定vbuser的具体结构，可以先写成vbuser?: any;，之后再逐步补全类型，这样至少能解决属性不存在的报错。

2. 配置tsconfig.json确保类型文件被识别 #

接下来要让TypeScript读取到这个自定义类型文件，检查你的tsconfig.json里的这两个配置：

{
  "compilerOptions": {
    // 告诉TypeScript去哪里找类型定义文件，把自定义类型目录加进去
    "typeRoots": ["./node_modules/@types", "./src/types"],
    // 其他常规配置...
    "target": "ES2020",
    "module": "commonjs",
    "strict": true
  },
  // 确保自定义类型文件被包含在编译范围内
  "include": [
    "src/**/*",
    "./src/types/custom.d.ts"
  ]
}

注意：如果你的custom.d.ts放在项目根目录，就调整include里的路径；如果用typeRoots的话，它会自动扫描指定目录下的.d.ts文件，也可以不用在include里显式写，但显式写更保险。

3. 排查常见坑点 #

如果还是没生效，可能是这几个原因：

• 你之前的自定义类型文件没有放在declare module 'express'里，导致TypeScript没有合并接口，而是创建了一个新的Request接口，自然不会生效。
• TypeScript缓存了旧的类型信息，试着重启一下你的编辑器（比如VS Code），或者执行tsc --clearCache清除缓存。
• 确认node-vbauth的中间件确实已经在Express应用中正确注册，只有中间件运行后req.vbuser才会存在，TypeScript的类型只是提前声明这个属性可能存在。

这样调整之后，你再访问req.vbuser的时候，TypeScript就不会再提示属性不存在了。

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