ElementPlus-Table表格-单选--TypeScript进阶篇

        今天看个例子，这个例子是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