Vue3中defineComponent组件属性无强类型提示的解决办法

问题场景 #

以下是一个最小示例：

import { defineComponent, h } from "vue";

export const Test = defineComponent<{ foo: string }>(
  (props: { foo: string }) => {
    return () => h("div", `Hello ${props.foo?.toString()}`);
  }
);

使用该组件时存在以下问题：

• 传入类型不匹配的值（如 <Test :foo="5" />）无强类型校验提示
• 误用不存在的属性（如 foo2）不会触发错误提示
• 编辑器无法自动补全foo属性

正确解决方案 #

在Vue 3中，要让组件Props获得完整的类型校验和编辑器支持，需采用以下两种标准写法之一：

方案1：选项式声明Props（适配defineComponent调用） #

通过defineComponent的props选项声明属性，Vue会自动推导类型，同时编辑器能识别属性信息：

import { defineComponent, h } from "vue";

export const Test = defineComponent({
  props: {
    foo: {
      type: String,
      required: true
    }
  },
  setup(props) {
    return () => h("div", `Hello ${props.foo}`);
  }
});

方案2：使用defineProps宏（