vue3+ts获取组件Type-safe ref 实例

在 vue3 中获取组件的类型：

type EleForm = InstanceType

在template中获取组件的ref

tsx等render组件中获取的方式更简单

import { defineComponent, ref, onMounted } from '@vue/runtime-core'
import { ElForm } from 'element-plus'


export default defineComponent({

    setup() {
    
        const $form = ref>(null)
        
        onMounted(() => {
            $form?.value?.validate // 类型正确
        })
        
        return () => 
            
    }

})

需要注意的是，如果使用expose暴露方法出去，无法获取到对应的类型，您需要自定义类型

// 组件 MyForm
import { defineComponent, ref, onMounted } from '@vue/runtime-core'
import { ElForm } from 'element-plus'

type ELEForm = InstanceType


// 在外界通过 ref 获取组件实例 请使用这个类型
export interface MyFormExpose {
  validate: ELEForm['validate'];
}

export default defineComponent({
    name: 'MyForm',

    setup(props, { expose }) {
    
        const $form = ref>(null)
        
        expose({
          validate: (callback) => $form?.value?.validate(callback),
        } as MyFormExpose)
        
        return () => 
            
    }

})