vue3 typescript 子控件props中type类型自定义

在Vue 3中，使用TypeScript时，可以通过定义Props的interface来指定type的类型。这里是一个简单的例子：

import { defineComponent, PropType } from 'vue';
 
interface MyProps {
  myStringProp: string;
  myNumberProp: number;
  myBooleanProp: boolean;
  myObjectProp: {
    message: string;
  };
  myArrayProp: string[];
}
 
export default defineComponent({
  props: {
    myStringProp: String,
    myNumberProp: Number,
    myBooleanProp: Boolean,
    myObjectProp: Object as PropType<MyProps['myObjectProp']>,
    myArrayProp: Array as PropType<MyProps['myArrayProp']>
  }
} as ComponentOptions<object, MyProps>);

在这个例子中，我们定义了一个MyProps接口来描述所有props的类型。然后在defineComponent的props选项中，我们使用PropType来指定更具体的类型，而不仅仅是String, Number, Boolean, Object, 或 Array。这样做可以让你的代码更加清晰和类型安全。