TypeScript 在vue3中对组件的ref的类型定义

1.开发环境

IDE:Visual Studio Code
IDE插件:Vue-Official
核心包:vue3,element-plus

完成了对ref定义则对该组件的智能提示有了支持，才符合TypeScript的使用

组合式 Composition API

<template>
 <el-table ref="elTableRef">
</template>
<script lang="ts" setup>
import { ElTable } from 'element-plus';
import { ref,Ref } from 'vue'
//自动推导出来的
const elTableRef=ref<InstanceType<typeof ElTable>|null>(null);

//强制定义
const elTableRef:Ref<InstanceType<typeof ElTable>|null>=ref<InstanceType<typeof ElTable>|null>(null);
onMounted()=>{
    elTableRef.value?getSelectionRows();
}
 </script>

选项方式 Options API

<template>
 <el-table ref="elTableRef">
</template>
<script lang="ts">
import { ElTable } from 'element-plus';
import { ref,Ref } from 'vue'
export default {
    mounted() {
        (this.$refs.elTableRef as InstanceType<typeof ElTable>).getSelectionRows();
    }
}
</script>