使用Vite构建React TS UI库时.d.ts文件为空的问题求助

关键问题定位 #

1. tsconfig.app.json中noEmit: true导致tsc命令无法输出类型文件，同时vite-plugin-dts在复合TS配置下可能无法正确读取类型信息
2. package.json未配置types字段，发布后TypeScript无法识别包的类型入口
3. vite-plugin-dts未明确指定TS配置文件路径，复合配置场景下存在识别异常

具体修复步骤 #

1. 修改tsconfig.app.json，配置类型输出规则 #

将noEmit改为false，添加emitDeclarationOnly: true让tsc仅生成类型文件，同时指定输出目录：

{
  "compilerOptions": {
    // ... 保留原有其他配置
    "noEmit": false,
    "emitDeclarationOnly": true,
    "declarationDir": "./dist"
  },
  "include": ["lib"]
}

2. 调整vite-plugin-dts配置，指定TS配置路径 #

在插件配置中明确指向tsconfig.app.json，规避复合配置的识别问题：

plugins: [
  dts({
    outDir: 'dist',
    insertTypesEntry: true,
    tsConfigPath: './tsconfig.app.json'
  })
],

3. 完善package.json的类型与导出配置 #

添加types字段，并在exports中补充类型入口，确保TypeScript能正确识别包的类型：

"main": "./dist/veil-ui.umd.cjs",
"module": "./dist/veil-ui.js",
"types": "./dist/veil-ui.d.ts",
"exports": {
  ".": {
    "import": "./dist/veil-ui.js",
    "require": "./dist/veil-ui.umd.cjs",
    "types": "./dist/veil-ui.d.ts"
  }
},

4. 优化build脚本 #

由于vite-plugin-dts会在构建时自动生成类型文件，可简化脚本避免重复执行tsc：

"scripts": {
  "dev": "vite",
  "build": "rimraf dist && vite build"
},

验证流程 #

1. 执行npm run build，检查dist目录下的veil-ui.d.ts是否包含正确的组件导出内容
2. 本地测试：在另一个TypeScript项目中安装本地包，验证组件的类型提示、自动补全功能是否正常
3. 发布前确认package.json的types和exports配置无误，避免发布后类型失效

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