Vue3 TypeScript PropType TS 定义代码演示

在Vue3中使用TypeScript定义PropType的方式如下：

import { PropType } from 'vue';

interface MyComponentProps {
  prop1: string;
  prop2: number;
  prop3: boolean;
  prop4: {
    name: string;
    age: number;
  };
}

export default {
  props: {
    prop1: {
      type: String as PropType<MyComponentProps['prop1']>,
      required: true
    },
    prop2: {
      type: Number as PropType<MyComponentProps['prop2']>,
      default: 0
    },
    prop3: {
      type: Boolean as PropType<MyComponentProps['prop3']>,
      default: false
    },
    prop4: {
      type: Object as PropType<MyComponentProps['prop4']>,
      required: true
    }
  },
  // ...
}

在上面的例子中，我们首先定义了MyComponentProps接口来描述组件的props类型。然后，在props选项中使用as PropType<xxx>将每个props的类型指定为对应的接口类型。

这样做的好处是能够在编译阶段进行类型检查，避免传入错误类型的props，提升代码的可靠性和可维护性。