JS代码库为第三方库做模块扩展时如何在VSCode启用TypeScript智能提示

问题核心原因 #

1. jsconfig.json 本身不支持 typeRoots 配置项，该配置仅在 tsconfig.json 中生效，你额外配置的 typeRoots 不会被识别，也不会引导TypeScript服务加载自定义类型文件。
2. 你配置的 include 规则没有明确覆盖自定义类型声明文件，导致TypeScript服务没有扫描到你写的MUI模块扩展代码。

正确配置步骤 #

1. 调整jsconfig.json

移除无效的typeRoots配置，明确在include中添加自定义类型文件的匹配规则：

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src", "src/types/**/*.d.ts"]
}

2. 调整类型声明文件

推荐使用更简洁的目录结构，且注意类型声明文件顶部不要加任何import/export语句，否则文件会被识别为局部模块，声明的模块扩展不会全局生效：

.
├── src/
│   └── types/
│       └── index.d.ts // 存放模块扩展代码
└── jsconfig.json

src/types/index.d.ts内容直接写模块扩展即可：

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    new: true;
  }
}

3. 重启服务生效

修改完成后按下Ctrl+Shift+P，选择TypeScript: Restart TS Server，等待服务重启完成后即可看到新增的new variant智能提示。

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