Typescript导入自研NPM React组件库提示找不到模块声明文件如何解决

你使用了子路径直接导入的写法import SvgIcon from '@myapp/ui/components/SvgIcon'，但组件库仅在根目录提供了汇总的index.d.ts类型声明，没有为components/SvgIcon这个子路径单独配置对应的类型声明文件，TS 无法匹配到子路径的类型定义，因此抛出缺失声明文件的错误。

方案1：修改导入写法（推荐，改动最小） #

直接从组件库根路径导入已经暴露的SvgIcon即可，根路径的类型声明已生效：

import { SvgIcon } from '@myapp/ui'

方案2：组件库侧支持子路径导入（适配原有导入写法） #

如果需要保留原有的子路径导入写法，需要给组件库做如下配置：

• 每个子路径组件的同级目录下补充对应的.d.ts声明文件，比如在components/目录下新增SvgIcon.d.ts，写入SvgIcon的属性定义、组件声明，导出规则和同级的SvgIcon.js保持一致即可
• 也可以在组件库的package.json中配置exports字段，统一映射所有子路径的类型和入口：

{
  "exports": {
    ".": {
      "types": "./index.d.ts",
      "default": "./index.js"
    },
    "./components/SvgIcon": {
      "types": "./components/SvgIcon.d.ts",
      "default": "./components/SvgIcon.js"
    }
  }
}

注意：如果你是组件库的维护者，打包TS组件库时建议开启tsconfig.json的declaration: true和declarationDir配置，让工具自动生成所有组件对应的.d.ts文件到对应输出目录，避免出现子路径导入无类型的问题。

方案3：项目侧临时兼容（不推荐，会丢失类型提示） #

如果不想调整组件库也不想改导入写法，可以在你当前项目的全局声明文件（通常为src/global.d.ts或者自定义的.d.ts文件）中加一行声明：

declare module '@myapp/ui/components/SvgIcon';

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