typescript - 使用unplugin-vue-components之后如何在ref中获取自动导入的组件类型？

Question

vue3使用了unplugin-vue-components引入elementplus组件后，如何在写ts的时候获取组件类型？
这个文件好像只对template里的组件才有提示，现在我需要获取组件的方法，let treeRef = ref() 使用ref之后，treeRef.value 不提示组件内部方法，然后我手动引入了el-tree组件，写成了let treeRef = ref<intanceType<typeof Eltree>>() 之后可以有提示，但是这样做就失去了使用unplugin-vue-components的意义，而且这样使用由于没全局导入样式，所以组件是没有样式的。

我尝试使用let treeRef = ref<GlobalComponents.ElTree>()不行，应该有一种方法可以获取到生成的component.d.ts里 GlobalComponents声明的全局组件类型。

Answer 1

只导入类型声明、而非真实导入模块，是：

let treeRef = ref<import('element-plus/es').ElTree>()

或者：

import { type ElTree } from 'element-plus/es'
let treeRef = ref<typeof ElTree>();

而不是：

import { ElTree } from 'element-plus/es'
let treeRef = ref<typeof ElTree>();

P.S. 徒手写的，没看 element-plus 导出的类型定义是啥，需不需要 InstanceType<> 题主自己看着办。

---

至于你想要的，看这里：

https://github.com/unplugin/unplugin-vue-components/issues/601

Answer 2

你这个想法蛮有启发性的。其实可以这样

import type { GlobalComponents } from 'vue';

const treeRef = ref<InstanceType<GlobalComponents['ElTree']>>()

const treeRef = ref<InstanceType<import('vue').GlobalComponents['ElTree']>>()

Answer 3

新建一个文件：

import type { GlobalComponents } from 'vue'

declare global {
  type ComponentInstance = {
    [Property in keyof GlobalComponents]: InstanceType<GlobalComponents[Property]>
  }
}

然后就可以使用：
const treeRef = ref<ComponentInstance['ElTree']>()