如何让VSCode IntelliSense识别package.json中segments的导出内容？

问题背景 #

你的package.json通过exports字段配置了多格式导出，其中./segments/*用于匹配dist/webvtt/segments/下的所有模块：

"exports": {
  ".": {
    "default": "./dist/main.es.js",
    "require": "./dist/main.cjs.js",
    "types": "./dist/main.d.ts"
  },
  "./utils": {
    "default": "./dist/utils.es.js",
    "require": "./dist/utils.cjs.js",
    "types": "./dist/utils.d.ts"
  },
  "./segments/*": {
    "default": "./dist/webvtt/segments/*.es.js",
    "require": "./dist/webvtt/segments/*.cjs.js",
    "types": "./dist/webvtt/segments/*.d.js"
  }
}

对应文件结构中，dist/webvtt/segments/下存在Comment、Cue等多个模块文件，但VSCode的IntelliSense仅能识别./segments路径，无法提示具体可导入的脚本，不过手动导入后模块可正常使用。

解决方法 #

1. 添加typesVersions字段映射通配符类型路径 #

TypeScript对exports中的通配符类型映射需要通过typesVersions明确声明，在package.json中添加以下配置：

"typesVersions": {
  "*": {
    "segments/*": ["dist/webvtt/segments/*.d.ts"]
  }
}

该配置会告知TypeScript：当匹配到你的包名/segments/*的导入路径时，自动去dist/webvtt/segments/*.d.ts查找对应类型文件，以此让IntelliSense识别到具体的模块选项。

2. 重启VSCode的TypeScript服务 #

配置修改完成后，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）打开命令面板，输入并执行TypeScript: Restart TS Server，使新配置生效。

备选方案：手动声明模块导出 #

如果上述方法未生效，可在项目根目录创建segments.d.ts文件，手动声明所有segments下的模块：

// 替换为你的实际包名
declare module 'your-package-name/segments/Comment' {
  export * from './dist/webvtt/segments/Comment.d.ts';
}

declare module 'your-package-name/segments/Cue' {
  export * from './dist/webvtt/segments/Cue.d.ts';
}

declare module 'your-package-name/segments/Header' {
  export * from './dist/webvtt/segments/Header.d.ts';
}

declare module 'your-package-name/segments/Segment' {
  export * from './dist/webvtt/segments/Segment.d.ts';
}

declare module 'your-package-name/segments/Style' {
  export * from './dist/webvtt/segments/Style.d.ts';
}

通过手动注册每个模块的类型，让IntelliSense能识别到具体的导入选项。

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