主角：vue3中的ref和ts的结合使用
起因
在vue3+ts中会使用到ref去获取组件实例，比如const treeRef = ref(); 但是我们想给treeRef定义一个类型，让我们知道这是一个什么类型怎么办？
经过
翻阅了一下ts官网，在Utility Types中我们可以找到一个叫做 InstanceType的使用类型。
class C {
x = 0;
y = 0;
}
type T0 = InstanceType<typeof C>;
(链接地址：https://www.typescriptlang.org/docs/handbook/utility-types.html#instancetypetype)
这边直接看官网的代码，初步意思就是 typeof C 呢就是我们class C的构造函数了。 这个实用类接受的是一个构造函数那么好，我们运用到实际。
如上图我们给el-tree 这个组件绑定了一个ref="treeRef"，
/*
注：为什么不是 ref<ElTree>()
首先 在其他vue页面export default 导出的是一个对象而不是对象类型
那么 ref<ElTree>中 ElTree 导出的本质是一个拥有构造函数的实例
其次 我们在使用组件的时候是直接使用导出对象吗？，并不是，我们使用的是->根据上面的对象创建出来 一个真正的组件实例过程
结果 ref<InstanceType<typeof ElTree>>() 给ref传递一个泛型的类型就是 ElTree
*/
const treeRef = ref<InstanceType<typeof ElTree>>();
当我们做完上面这些想使用组件实例中一些方法的时候，vscode还是会报红。
鼠标移上去 Object is possibly 'undefined',意思是treeRef.value可能是一个undefined，undefined.function() 浏览器肯定会报错对不对，typescript的好处就是让我们在编译阶段就给我们抛出错误越早发现问题，后期修复工作量就越少，其实这个问题好解决，因为我们知道组件内部是有这个方法，那么我们就给treeRef.value后面强制跟上一个!,代码如下
/*
注:!.的意思其实就是让ts知道这个对象不是undefined或者是null,在js里面单独!意思是取反,所以希望注意用的时候不要搞混掉
*/
treeRef.value!.getCheckedNodes()
