[Vue3] 指定ref类型，优雅地使用ref调用组件方法

一、背景

在使用组件库时，经常需要通过ref获得组件实例，并调用组件上的方法。如el-form组件的validate校验方法，el-table组件的toggleRowSelection等方法。

vue3中使用ts之后，如果没有正确设定ref的类型，调用时就不得不用xxref as any的方式调用组件上的方法了，这样显然十分不优雅。

二、获取组件实例类型

要指明ref的类型，首先需要获取组件实例的类型。 可以通过ts的InstanceType获取

// 以ElForm的实例类型为例
import { ElForm, ElTable } from "element-plus";
export type ElFormInstance = InstanceType<typeof ElForm>;

三、指定ref类型

vue3中的ref可以接受泛型指定具体的实例类型，这样在使用时就可以自动带出该组件实例上的方法了

<script lang="ts" setup>
// 指定ref类型
const formRef = ref<ElFormInstance | null>(null)

// 提交表单
const submitForm = ()=>{
    // 先校验
    formRef.value && formRef.value.validate((isValid?:boolean)=>{
        if(isValid){
            //校验通过 dosomething
        }
    })
}
</script>