(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践

实践方案

• 问题原因：Vue3并没有对自定义全局组件做TS类型支持处理，而是把这个功能转交Volar实现
• 实现原理：利用TypeScript模块扩充技术，对全局组件的类型进行扩充，从而实现对新注册全局组件的类型保护
• 实现步骤：①声明一个的*d.ts类型文件 ②对类型接口进行类型模块扩充并导出

---

参考Volar文档 定义全局组件：使用GlobalComponents类型接口声明类型

// components.d.ts
import Button from './Button/index.vue';
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    // 组件名: Button组件数据
    DemoButton: typeof Button;
  }
}
export {};

简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口

原文地址：https://juejin.cn/post/7066730414626308103