如何为Vue组件的text props正确标注字符串或组件类型？

要给text props设置强类型，你需要用Vue官方提供的Component类型替代宽泛的object类型，这样既能限制传入的是合法Vue组件，也支持字符串类型。

修改步骤： #

1. 从vue包中导入Component类型
2. 把text的类型从string | object替换为string | Component
3. 可选：添加类型守卫函数让类型判断更严谨

修改后的完整代码： #

<template>
  <v-dialog
    width="auto"
    v-model="isShown"
    transition="dialog-bottom-transition"
  >
    <v-card>
      <v-card-title v-if="title"> {{ title }}</v-card-title>
      <v-card-text>
        <component v-if="isComponent(text)" :is="text"></component>
        <span v-else>{{ text }}</span>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        // 按钮逻辑
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { defineProps, computed, Component } from "vue";

const params = defineProps<{
  show: boolean;
  title?: string;
  text: string | Component;
  confirmButtonText?: string;
  closeButtonText: string;
}>();
const emit = defineEmits(["closeWindow", "confirmOperation"]);

const isShown = computed({
  get() {
    return params.show;
  },
  set(newValue) {
    emit("closeWindow");
  },
});

// 类型守卫：判断是否为Vue组件
function isComponent(value: string | Component): value is Component {
  return typeof value !== "string";
}
</script>

说明： #

• Component类型是Vue提供的强类型，涵盖了所有合法的Vue组件形式（包括选项式组件、组合式组件、异步组件等），避免了object类型的宽泛性
• 类型守卫函数isComponent能让TypeScript在模板和逻辑中更准确地推断text的类型，避免类型报错
• 如果需要支持传入VNode（比如渲染函数返回的节点），可以把类型扩展为string | Component | VNode，同时调整判断逻辑

内容的提问来源于stack exchange，提问作者Дмитрий