TypeScript工作区工具包package.json exports无Intellisense提示问题

问题背景 #

我正在创建工作区工具包@app/utils，目前遇到TypeScript配置问题：安装导入该包后功能和类型安全都正常，但Intellisense无法给出package.json中exports字段定义的可用路径提示，只有输入正确路径后红色波浪线才会消失。添加resolvePackageJsonExports和moduleResolution: bundler选项后没有改善，想知道这是设置问题还是正常现象？

现有配置 #

package.json #

{
  "name": "@app/utils",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "tsc -w",
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.1.3"
  },
  "exports": {
    "./numbers": {
      "import": {
        "types": "./dist/types/numbers.d.ts",
        "default": "./dist/numbers.js"
      }
    },
    "./datetime": {
      "import": {
        "types": "./dist/types/datetime.d.ts",
        "default": "./dist/datetime.js"
      }
    }
  },
  "types": "./dist/types",
  "files": [
    "dist"
  ]
}

tsconfig.json #

{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "module": "esnext",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true,
    "experimentalDecorators": true,

    "noEmit": false,
    "rootDir": "src",
    "outDir": "dist",
    "declaration": true,
    "declarationDir": "dist/types",
    "resolvePackageJsonExports": true,
    "moduleResolution": "bundler"
  },
  "include": ["src/**/*"]
}

问题结论与解决方法 #

这不是正常现象，属于配置细节缺失导致Intellisense无法识别exports子路径提示，可通过以下调整解决：

• 补充typesVersions字段：在package.json中添加typesVersions，明确映射子路径的类型文件，帮助Intellisense快速识别：

  "exports": {
    "./numbers": {
      "types": "./dist/types/numbers.d.ts",
      "import": "./dist/numbers.js"
    },
    "./datetime": {
      "types": "./dist/types/datetime.d.ts",
      "import": "./dist/datetime.js"
    }
  },
  "typesVersions": {
    "*": {
      "numbers": ["./dist/types/numbers.d.ts"],
      "datetime": ["./dist/types/datetime.d.ts"]
    }
  }
  

• 切换moduleResolution模式：将tsconfig.json中的moduleResolution改为node16或nodenext，部分编辑器对该模式的exports解析兼容性更优，同时同步修改module字段：

  "module": "node16",
  "moduleResolution": "node16"
  

• 确保类型文件已生成：执行npm run build完成编译，确认dist/types目录下存在对应子路径的.d.ts文件，Intellisense依赖这些文件生成提示。

• 清除编辑器缓存：重启编辑器或执行TypeScript: Restart TS Server命令（VS Code中按Ctrl+Shift+P调出命令面板），刷新Intellisense缓存。

• 工作区路径映射（若为monorepo）：在根目录tsconfig.json中添加paths配置，明确包的路径映射：

  "paths": {
    "@app/utils/*": ["./packages/utils/dist/*"]
  }
  

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