今天看个例子，这个例子是ElementPlus的组件Table表格下面的单选
<template>
<el-table
ref="singleTableRef"
:data="tableData"
highlight-current-row
style="width: 100%"
@current-change="handleCurrentChange"
>
<el-table-column type="index" width="50" />
<el-table-column property="date" label="Date" width="120" />
<el-table-column property="name" label="Name" width="120" />
<el-table-column property="address" label="Address" />
</el-table>
<div style="margin-top: 20px">
<el-button @click="setCurrent(tableData[1])">Select second row</el-button>
<el-button @click="setCurrent()">Clear selection</el-button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElTable } from 'element-plus'
interface User {
date: string
name: string
address: string
}
const currentRow = ref()
const singleTableRef = ref<InstanceType<typeof ElTable>>()
const setCurrent = (row?: User) => {
singleTableRef.value!.setCurrentRow(row)
}
const handleCurrentChange = (val: User | undefined) => {
currentRow.value = val
}
const tableData: User[] = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>
注意到<script lang="ts" setup>，这个lang="ts"表明其中的脚本解释会使用TypeScript。
然后再看const singleTableRef = ref<InstanceType<typeof ElTable>>()这行，typeof ElTable表明会返回一个叫做ElTable名字的东西的类型，typeof类型运算符是JavaScript在表达式上下文中使用的运算符。typeof ElTable有可能会获得父类类型，那最终实例化的类型呢？
答案就是由InstanceType<Type>这个工具类型来获得最终实例化的类型。构造一个由 Type 中的构造函数的实例类型组成的类型。那么InstanceType<typeof ElTable>>就是得到<el-table
ref="singleTableRef">...</el-table>这个组件的类型。
ref是一个泛型函数，能捕获参数类型的函数，表现得能接收多种类型参数的函数。ref<InstanceType<typeof ElTable>>()，这样写就表明ref现在是接收<el-table
ref="singleTableRef">组件类型的参数的函数
最终写成const singleTableRef = ref<InstanceType<typeof ElTable>>()，那么就表示singleTableRef是接收<el-table
ref="singleTableRef">组件类型的参数的函数返回的对象
最后我们再看看如下方法
const setCurrent = (row?: User) => {
singleTableRef.value!.setCurrentRow(row)
}
row?: User表示row参数可能存在，也可能不存在，参数类型是User。
singleTableRef.value!这样写表明接收<el-table
ref="singleTableRef">组件类型的参数的函数返回的对象的value值不能是null或者undefined，！在这里是个非空断言运算符
ElementPlus是基于vue3写的UI框架，而vue3是用TypeScript写的javascript框架，在ElementPlus中既可以写vue3，也可以写TypeScript