如何解决TypeScript导入node_modules模块时的各类报错问题

错误原因拆解 #

• 第一个报错：import Ticker from "ticker"编译无错但运行报错，是因为你输出的是ES Module格式，原生ESM规范要求所有模块说明符必须携带.//..///前缀，不支持直接写包名的「裸导入」，而TypeScript默认编译时不会修改导入路径，因此运行时浏览器/Node环境无法识别裸导入路径。
• 第二个报错：添加./前缀后找不到模块，是因为./ticker指向的是当前业务代码目录下的ticker文件，不是node_modules下的依赖包，路径指向完全错误。
• 第三个报错：直接导入dist下的js文件报类型错误，是因为你的类型声明是注册在ticker这个模块名上的，没有和./node_modules/ticker/dist/ticker.js这个物理路径绑定，因此TS无法将类型和该路径的导入关联，三斜杠引用也只对模块名导入生效，对具体路径导入无效。

VSCode识别差异原因 #

导入./node_modules/ticker/ticker时，路径指向ticker包的TS源文件，TS编译器可以直接读取.ts文件的代码推导类型，因此可以正常识别。而dist目录下的是编译后的.js文件，没有对应的同路径.d.ts声明文件，因此无法自动识别类型。

修复步骤 #

1. 修正tsconfig.json配置 #

首先修正错误的paths配置，将键名和依赖包名、类型声明的模块名对齐：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "ticker": ["./node_modules/ticker/dist/ticker.js"]
    }
  }
}

注意你的ticker模块是默认导出，导入时不要写花括号，正确写法是import Ticker from "ticker"。

2. 解决运行时裸导入问题 #

根据你的运行环境二选一即可：

• 浏览器环境：在HTML入口文件添加导入映射，让浏览器可以识别裸导入：

<script type="importmap">
{
  "imports": {
    "ticker": "./node_modules/ticker/dist/ticker.js"
  }
}
</script>

• Node.js环境：运行代码时添加参数即可支持裸导入：
  node --experimental-specifier-resolution=node 你的入口文件.js

3. 可选：兼容直接导入dist路径的类型 #

如果你坚持要直接导入dist下的js文件，可以在主项目的全局类型声明文件中添加如下配置，将类型和该路径绑定：

declare module './node_modules/ticker/dist/ticker.js' {
  export { default as Ticker } from 'ticker';
}

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