Vue 3 如何为全局注册的组件添加 TypeScript 类型支持？

步骤1：新增全局组件类型声明文件 #

在项目src目录下新建components.d.ts类型声明文件，写入以下内容：

import type Component1 from './Component1.vue'

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    // 键名需要和全局注册的组件名完全一致
    Component1: typeof Component1
  }
}

步骤2：确保声明文件被TS识别 #

检查项目根目录的tsconfig.json，确认include配置项包含了该声明文件：

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

验证生效 #

在VSCode中按下Ctrl+Shift+P（Mac系统为Cmd+Shift+P），执行TypeScript: 重启TS服务器，之后使用<Component1 />时即可正常获得msg属性的类型提示和校验。

注意事项 #

• 导入组件类型时必须使用import type语法，避免将类型代码打包到生产产物中
• 若有多个全局组件，只需在GlobalComponents接口下追加对应键值对即可
• 需使用Vue官方推荐的Volar插件提供TS支持，旧版Vetur插件对Vue3的TS适配不完善

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