【vue3】常见问题04：解决全局引入ElementPlus时类型提示丢失的问题

项目环境：

{
	"pnpm": 8.8.0,
	"node": v18.20.2,
	"vue": "3.4.21",
	"vite": "5.2.6"
}

项目场景：

项目场景：vue3的ts项目全局引入了elementPlus组件，导致没有ts相关的类型提示了

解决方案：

1. 项目根目录里新建文件夹types， 其中包含global.d.ts文件，内容如下：

/** 全局注册的组件需要在这里声明 TS 类型才能获得 Volar 插件提供的提示 */
declare module "vue" {
   export interface GlobalComponents {
       ElBacktop: (typeof import("element-plus/es"))["ElBacktop"]
       ElBreadcrumb: (typeof import("element-plus/es"))["ElBreadcrumb"]
       ElBreadcrumbItem: (typeof import("element-plus/es"))["ElBreadcrumbItem"]
       ElButton: (typeof import("element-plus/es"))["ElButton"]
       ElCard: (typeof import("element-plus/es"))["ElCard"]
       ElCheckbox: (typeof import("element-plus/es"))["ElCheckbox"]
       ElCheckboxGroup: (typeof import("element-plus/es"))["ElCheckboxGroup"]
       ElCol: (typeof import("element-plus/es"))["ElCol"]
       ElColorPicker: (typeof import("element-plus/es"))["ElColorPicker"]
       ElConfigProvider: (typeof import("element-plus/es"))["ElConfigProvider"]
       ElDatePicker: (typeof import("element-plus/es"))["ElDatePicker"]
       ElDialog: (typeof import("element-plus/es"))["ElDialog"]
       ElDivider: (typeof import("element-plus/es"))["ElDivider"]
       ElDrawer: (typeof import("element-plus/es"))["ElDrawer"]
       ElDropdown: (typeof import("element-plus/es"))["ElDropdown"]
       ElDropdownItem: (typeof import("element-plus/es"))["ElDropdownItem"]
       ElDropdownMenu: (typeof import("element-plus/es"))["ElDropdownMenu"]
       ElForm: (typeof import("element-plus/es"))["ElForm"]
       ElFormItem: (typeof import("element-plus/es"))["ElFormItem"]
       ElIcon: (typeof import("element-plus/es"))["ElIcon"]
       ElImage: (typeof import("element-plus/es"))["ElImage"]
       ElInput: (typeof import("element-plus/es"))["ElInput"]
       ElInputNumber: (typeof import("element-plus/es"))["ElInputNumber"]
       ElLink: (typeof import("element-plus/es"))["ElLink"]
       ElMenu: (typeof import("element-plus/es"))["ElMenu"]
       ElMenuItem: (typeof import("element-plus/es"))["ElMenuItem"]
       ElOption: (typeof import("element-plus/es"))["ElOption"]
       ElPagination: (typeof import("element-plus/es"))["ElPagination"]
       ElPopover: (typeof import("element-plus/es"))["ElPopover"]
       ElRadio: (typeof import("element-plus/es"))["ElRadio"]
       ElRadioGroup: (typeof import("element-plus/es"))["ElRadioGroup"]
       ElRow: (typeof import("element-plus/es"))["ElRow"]
       ElScrollbar: (typeof import("element-plus/es"))["ElScrollbar"]
       ElSelect: (typeof import("element-plus/es"))["ElSelect"]
       ElStatistic: (typeof import("element-plus/es"))["ElStatistic"]
       ElSubMenu: (typeof import("element-plus/es"))["ElSubMenu"]
       ElSwitch: (typeof import("element-plus/es"))["ElSwitch"]
       ElTable: (typeof import("element-plus/es"))["ElTable"]
       ElTableColumn: (typeof import("element-plus/es"))["ElTableColumn"]
       ElTag: (typeof import("element-plus/es"))["ElTag"]
       ElText: (typeof import("element-plus/es"))["ElText"]
       ElTooltip: (typeof import("element-plus/es"))["ElTooltip"]
       ElTreeSelect: (typeof import("element-plus/es"))["ElTreeSelect"]
       ElUpload: (typeof import("element-plus/es"))["ElUpload"]
       RouterLink: (typeof import("vue-router"))["RouterLink"]
       RouterView: (typeof import("vue-router"))["RouterView"]
   }

   export interface ComponentCustomProperties {
       vLoading: (typeof import("element-plus/es"))["ElLoadingDirective"]
   }
}

export {}

2. 找到tsconfig.json文件,配置include属性如下：

{
	"include": [
        "types/*.d.ts"
    ]
}

总结

1. GlobalComponents

• 这个接口定义了在 Vue 组件中可以全局使用的组件，如 Element Plus 中的各种组件 (ElButton, ElInput, ElTable 等等);
• 这些组件通过 typeof import(“element-plus/es”)[“ElButton”] 这种方式引入，确保了类型安全，即在使用这些组件时，TypeScript 能够进行正确的类型检查

2. ComponentCustomProperties

• 这个接口扩展了 Vue 组件实例上的自定义属性，在此处中是 vLoading 指令，该指令来自 Element Plus 的 ElLoadingDirective；
• 通过这种扩展方式，当你在 Vue 组件中使用 v-loading 指令时，TypeScript 也能进行相应的类型检查

3. export {} 的作用

• export {} 的作用就是明确告诉 TypeScript 这个文件是一个模块，而不是一个全局脚本文件，从而避免任何可能的命名冲突问题。