【Vue】vue3+ts 在组件模版中使用ref时，如何定义ref类型

在组件模版上定义ref获取组件时，如何定义ref的类型

在原生DOM上定义ref

// 模版
<div ref="elRef" />

// 使用
const elRef = ref<HTMLDivElement>();

参考链接：https://stackoverflow.com/questions/65002098/how-to-define-type-for-refbinding-on-template-in-vue3-using-typescript

在自定义组件上定义ref

// 模版
<MyComponent ref="myRef" />

// 使用
const myRef = ref<InstanceType<typeof MyComponent>>()

参考链接：https://stackoverflow.com/questions/66907606/whats-vue-3-composition-apis-type-safe-way-of-defining-methods/66909582#66909582

拓展

1. 如何获取自定义组件中的props类型

   const myPropsSetting = ref<InstanceType<typeof MyComponent>['$props']>({
   	propA: "一个参数",
   	propC: "两个参数"
   })
   
   // in template
   < MyComponent v-bind="myPropsSetting" />