使用子路径导出时TypeScript类型定义无法生效

问题重现 #

项目配置子路径导出后，JS项目使用正常，但TS项目导入时提示找不到模块或对应类型声明。尝试过带types字段的exports配置、typesVersions配置均无效；仅设置单一主模块导出时，主导入语句正常，但子路径导入仍报错。

有效配置方案 #

首先确认你的TypeScript版本在4.7及以上（TS 4.7才开始支持解析exports字段里的types入口），然后修改package.json的exports配置如下：

"exports": {
  ".": {
    "types": "./types/index.d.ts",
    "import": "./dist/index.js"
  },
  "./react-lazy": {
    "types": "./types/react-lazy.d.ts",
    "import": "./dist/react-lazy.js"
  }
}

额外注意事项 #

• 路径校验：确保types字段指向的路径是相对于package.json的真实路径，检查types目录下是否存在对应的.d.ts文件
• CommonJS兼容：如果项目需要同时支持CommonJS，需在exports中补充require入口：

  ".": {
    "types": "./types/index.d.ts",
    "import": "./dist/index.js",
    "require": "./dist/index.cjs"
  }
  

• npm链接问题：如果用npm link测试，需要在TS项目的tsconfig.json的compilerOptions中添加"preserveSymlinks": true，避免符号链接导致的路径解析异常

验证 #

调整配置后重新执行测试命令：

tsc --lib es2015,dom --noEmit main.ts

此时两个导入语句的类型应该都能被正确识别。

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