如何为含Props、Emits及暴露函数的Vue组件添加类型定义？

你可以利用Vue提供的Component类型的三个泛型参数，分别定义组件的Props、Emits和暴露的方法，让动态组件获得完整的类型提示。

步骤1：定义完整的组件类型 #

Component的泛型签名为Component<Props, Emits, Expose>，可将组件的Props、事件、暴露方法分别传入：

import type { Component } from "vue";
import type Task from "@/types/Task";

// 定义Props类型，与组件内defineProps结构一致
type MyComponentProps = {
  task: Task;
};

// 定义Emits类型，与组件内defineEmits结构一致
type MyComponentEmits = {
  (event: 'finishedEditing'): void;
};

// 定义暴露的方法类型，与组件内defineExpose结构一致
type MyComponentExpose = {
  focus: () => void;
};

// 组合成完整的组件类型
type TMyComponent = Component<MyComponentProps, MyComponentEmits, MyComponentExpose>;

步骤2：约束组件数组的类型 #

用上述TMyComponent约束组件数组，确保所有组件都符合类型规范：

import MyComponent_A from "MyComponent_A.vue";
import MyComponent_B from "MyComponent_B.vue";
import MyComponent_C from "MyComponent_C.vue";

const components: TMyComponent[] = [
  MyComponent_A,
  MyComponent_B,
  MyComponent_C
];

步骤3：在动态组件中获得类型支持 #

使用<component>标签时，TypeScript会自动识别Props、事件和暴露方法的类型：

<template>
  <component
    :is="currentComponent"
    :task="currentTask"
    @finished-editing="handleFinish"
    ref="componentRef"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { TMyComponent } from "./types";
import type Task from "@/types/Task";

const currentComponent = ref<TMyComponent>(MyComponent_A);
const currentTask = ref<Task>(/* 你的Task实例 */);
const componentRef = ref<InstanceType<TMyComponent> | null>(null);

const handleFinish = () => {
  // 事件回调获得类型校验
};

// 调用暴露的focus方法时，TypeScript会提示该方法存在
componentRef.value?.focus();
</script>

类型说明 #

• Props泛型：对应组件内defineProps的类型，确保传入属性符合要求
• Emits泛型：对应组件内defineEmits的结构，确保绑定的事件名称、参数类型正确
• Expose泛型：对应组件内defineExpose的内容，通过ref获取组件实例后，能正确提示暴露的方法和属性

内容的提问来源于stack exchange，提问作者akopyl