Vue3+Vite+TS解决调用组件实例有类型推断

Vue3+Vite+TS解决调用组件实例有代码提示

子组件ChildComponent

<template>
	<div>我是子组件</div>
</template>

<script>
import { reactive } from "vue"

const form = reactive({
	name: ""
});

const getName = (): string => {
	return form.name;
}

defineExpose({
	form,
	getName
})
</script>

父组件

<template>
	<div>我是父组件</div>
	<child-component ref="childRef"/>
</template>

<script>
import { reactive, ref } from "vue"
import type ChildComponent from "@/component/ChildComponent.vue"

const childRef = ref<InstanceType<typeof ChildComponent>>()

onMounted(() => {
	// 此时编写childRef.value.的时候就有代码提示啦
	console.log(childRef.value?.form);
	console.log(childRef.value?.getName())
})
</script>

重点在于使用TS内置的类型 InstanceType 用于获取构造函数的实例类型

InstanceType<typeof ChildComponent>