Vue2+Webpack旧JS项目中，如何绑定生成的声明文件到对应JS文件？

首先，你报错信息里的@views是拼写错误，应该是@infra，先修正这个笔误。接下来针对模块声明绑定的问题，按以下步骤调整：

核心问题分析 #

你当前的typeRoots配置不适合这种模块级别的声明文件——typeRoots是用来指定全局类型包（比如@types/node这类）的根目录，而你的声明文件是和源码模块一一对应的，所以得调整TS配置的思路。

具体解决方案 #

1. 修正tsconfig.json的基础配置 #

确保baseUrl设置为项目根目录，同时调整paths和include：

{
  "compilerOptions": {
    "baseUrl": ".", // 必须设置，paths依赖这个基准路径
    "paths": {
      "@infra/*": [
        "infrastructure/*", // 指向JS源码文件
        "types/infrastructure/*" // 指向生成的声明文件
      ]
    },
    "include": [
      "src/**/*", // 你的Vue组件等业务源码目录
      "infrastructure/**/*",
      "types/**/*" // 把声明文件目录加入编译扫描范围
    ],
    // 移除typeRoots里的"./types"，它不适用当前模块级声明的场景
    "typeRoots": ["./node_modules/@types"]
  }
}

2. 验证声明文件的导出正确性 #

确保生成的browsers.d.ts里的导出结构和browsers.js完全匹配。比如如果browsers.js是默认导出一个工具对象，browsers.d.ts应该类似：

export default {
  isChrome: () => boolean;
  isFirefox: () => boolean;
  // 补充其他方法的类型定义
};

如果tsc自动生成的声明不够准确，你可以手动调整类型细节。

3. 重启TS服务/编辑器 #

修改tsconfig后，重启你的编辑器（比如VS Code）或者TS语言服务，确保新配置生效。

为什么之前的配置不生效？ #

• typeRoots只会查找目录下的@types风格的包结构，不会递归匹配模块路径，所以你的types/infrastructure结构无法被它识别。
• 之前的paths只指向了JS源码目录，没有关联到声明文件目录，TS无法找到对应模块的类型定义。

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