自定义Vue组件npm包全局注册后类型被推断为Any的求助

1. 确认npm包的类型导出逻辑 #

• 组件源码里用defineComponent定义组件，并明确导出组件本身和对应的props/类型：

<!-- 组件文件 MyComponent.vue -->
<script setup lang="ts">
// 组件逻辑
</script>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  // 选项API配置（如果用到的话）
})

// 导出组件的props类型
export type MyComponentProps = {
  title?: string
  // 其他props定义
}
</script>

• 包的入口文件（如index.ts）统一导出组件和类型，同时在package.json里指定types字段指向生成的类型文件：

{
  "types": "./dist/index.d.ts",
  "main": "./dist/index.umd.js",
  "module": "./dist/index.esm.js"
}

2. 全局注册时手动绑定类型 #

在main.ts里全局注册组件时，直接扩展Vue的全局组件类型：

import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from 'your-custom-package'
import type { MyComponent } from 'your-custom-package'

const app = createApp(App)
app.component('MyComponent', MyComponent)

// 扩展Vue的全局组件类型声明
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    MyComponent: typeof MyComponent
  }
}

app.mount('#app')

3. 检查类型声明文件的生成与配置 #

• 打包npm包时，确保tsconfig.json开启了类型声明生成：

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

• 如果手动维护global.d.ts，要放在TypeScript能扫描到的目录（比如项目根目录或src下），并且内容要正确：

// global.d.ts
import type { MyComponent } from 'your-custom-package'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    MyComponent: typeof MyComponent
  }
}

// 必须加这行，避免被当成模块
export {}

4. Volar的针对性配置 #

• 确保项目的tsconfig.json里include字段包含了所有类型文件：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.vue",
    "./global.d.ts"
  ]
}

• 项目根目录创建volar.config.js，指定全局组件的类型来源：

module.exports = {
  globalComponents: [
    {
      name: 'MyComponent',
      path: 'your-custom-package'
    }
  ]
}

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