在Vue 3中，使用TypeScript时，如果想要通过defineExpose使得子组件暴露的方法具有类型提示，可以在父组件中定义一个接口来描述子组件暴露的属性和方法。
以下是一个简单的例子：
首先，定义子组件暴露的方法的接口：
// ChildComponent.ts
export interface ChildComponentExposedMethods {
doSomething(): void;
getValue(): number;
}
然后，在子组件中使用defineExpose来暴露方法：
<template>
<!-- 子组件模板 -->
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ChildComponentExposedMethods } from './ChildComponent';
export default defineComponent({
name: 'ChildComponent',
setup() {
const doSomething = () => {
// 实现功能
};
const value = ref(0);
const getValue = () => {
return value.value;
};
// 暴露的方法
const exposed = { doSomething, getValue } as ChildComponentExposedMethods;
// 在Vue 3中使用defineExpose来暴露属性和方法
defineExpose(exposed);
return {};
},
});
</script>
最后，在父组件中接收并使用这些方法时会有类型提示：
<template>
<ChildComponent ref="childComp"/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ChildComponentExposedMethods } from './ChildComponent';
export default defineComponent({
name: 'ParentComponent',
setup() {
const childComp = ref<Nullable<ChildComponentExposedMethods>>(null);
const callChildMethod = () => {
if (childComp.value) {
childComp.value.doSomething();
console.log(childComp.value.getValue());
}
};
return {
childComp,
callChildMethod,
};
},
});
</script>
在父组件中，通过ref创建了一个childComp引用，并指定了它的类型为Nullable<ChildComponentExposedMethods>，这样在调用子组件暴露的方法时，就会有代码提示。