如何在TypeScript的d.ts文件中为Vue组件库动态声明命名导出

错误原因 #

你尝试的两种写法都不符合TypeScript类型声明的静态要求：

• 第一种写法export * from 'my-library'属于在my-library模块的声明中循环引用自身，TypeScript静态分析时会直接忽略这部分导出逻辑
• 第二种写法里的Object.entries是运行时代码，TypeScript的类型系统在编译阶段不会执行任何JS逻辑，自然识别不到你动态生成的导出声明

解决方案 #

方案1：启用TypeScript自动生成声明文件（最推荐）

只要你的组件库源码是TypeScript编写，且已有统一入口文件（如src/index.ts）同时导出了Vue插件实例和所有组件，不需要手动编写index.d.ts，直接在tsconfig.json中开启声明自动生成即可：

{
  "compilerOptions": {
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "dist/types",
    "strict": true
  },
  "include": ["src/**/*"]
}

之后在package.json中指定类型入口：

{
  "types": "./dist/types/index.d.ts"
}

TypeScript会自动扫描所有源码的导出内容，生成完整的类型声明文件，不需要手动维护组件列表。

方案2：构建脚本自动生成类型声明

如果因为项目配置原因无法使用自动生成能力，可以写一个简单的Node脚本，扫描组件目录自动生成包含所有组件的类型声明：
示例脚本（假设所有组件存放在src/components目录，文件名即为导出的组件名）：

// scripts/gen-dts.js
const fs = require('fs')
const path = require('path')

// 扫描组件目录
const componentDir = path.resolve(__dirname, '../src/components')
const componentNames = fs.readdirSync(componentDir)
  .filter(fileName => /\.(vue|tsx?)$/.test(fileName))
  .map(fileName => fileName.replace(/\.(vue|tsx?)$/, ''))

// 生成声明内容
const dtsContent = `
import type { PluginFunction } from 'vue'

declare module 'my-library' {
  const lib: PluginFunction<any>
  export default lib

  export {
    ${componentNames.join(',\n    ')}
  }
}
`

// 写入文件
fs.writeFileSync(path.resolve(__dirname, '../index.d.ts'), dtsContent.trim())

之后在package.json的构建命令中加入该脚本的执行逻辑，每次构建前自动更新类型声明即可。

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