在 Vue 3 中，使用 `PropType` 定义复杂类型的 props

在 Vue 3 中，使用 PropType 可以定义复杂类型的 props。这对于确保组件 props 接收到的值符合预期的结构非常有用。下面是一些定义复杂类型的常见方法。

1. 定义对象类型

你可以使用 TypeScript 的接口或类型别名来定义复杂对象类型。

import { defineComponent, PropType } from 'vue';

interface User {
  id: number;
  name: string;
  email: string;
}

export default defineComponent({
  props: {
    user: {
      type: Object as PropType<User>,
      required: true,
    },
  },
});

2. 定义数组类型

如果你的 prop 是一个数组，可以使用 Array 或直接指定类型。

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    items: {
      type: Array as PropType<string[]>,
      required: true,
    },
  },
});

3. 定义联合类型

可以使用 TypeScript 的联合类型来定义 props，允许多个类型。

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    value: {
      type: [String, Number] as PropType<string | number>,
      required: true,
    },
  },
});

4. 定义嵌套类型

你还可以定义嵌套对象类型，以处理更复杂的数据结构。

import { defineComponent, PropType } from 'vue';

interface Address {
  street: string;
  city: string;
}

interface User {
  id: number;
  name: string;
  address: Address;
}

export default defineComponent({
  props: {
    user: {
      type: Object as PropType<User>,
      required: true,
    },
  },
});

5. 使用 validator

你可以使用 validator 函数来进行自定义的类型检查。

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    status: {
      type: String as PropType<'active' | 'inactive'>,
      required: true,
      validator: (value: string) => {
        return ['active', 'inactive'].includes(value);
      },
    },
  },
});

总结

使用 PropType 可以方便地定义复杂的 props 类型，确保组件的类型安全。通过结合 TypeScript 的类型定义，能够更好地维护和理解组件的接口。