vue3获取ref实例结合ts的InstanceType问题怎么解决

vue3获取ref实例结合ts的InstanceType

有时候我们模板引用，但是在使用的时候，ts提示却不行，没有提示组件通过defineExpose暴露的方法名称，虽然这不是很影响，但是可以解决还是可以解决下~

<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const sayHello = () => (console.log('我会说hello'))

defineExpose({
  sayHello
})
</script>

然后我们在父级使用，输入完成MyModalRef.value会发现没有sayHello这个函数提示，所以这个时候我们就需要使用InstanceType 工具类型来获取其实例类型

<!-- App.vue -->
<script setup lang="ts">
import MyModal from './MyModal.vue'
const MyModalRef = ref()

const handleOperation = () => {
  MyModalRef.value.sayHello
}
</script>

使用InstanceType 工具类型获取其实例类型：

<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const sayHello = () => (console.log('我会说hello'))

defineExpose({
  open
})
</script>

父级使用

<!-- App.vue -->
<script setup lang="ts">
import MyModal from './MyModal.vue'

const MyModalRef = ref<InstanceType<typeof MyModal> | null>(null)

const handleOperation = () => {
  MyModalRef.value?.sayHello()
}
</script>

貌似依旧没有提示使用InstanceType在提示的时候，然后输入错误内容也没有在编译前进行报错…，不过vue官方这样子说了，那就听他的吧(其实我一般不用，不过也学到了)

@vue官方API为组件模板引用标注类型

如何为vue3组件标注TS类型

Vue3和TS绝对是在今年最受欢迎的前端技术之列。许多公司正在使用 Vue3 + TS + Vite 组合来开发新项目。以下是重写后的句子：分享在Vue3组件中如何使用Composition-Api结合TS类型。

为 props 标注类型

使用