vue3+ts 泛型的高级运用实例

在 Vue 3 + TypeScript 中，泛型是一个非常常用的技巧，可以帮助我们编写出更加通用、可复用的代码。下面是一个泛型的高级运用实例：

假设我们有一个表单组件，它的数据模型是一个对象，其中每个属性都有一个对应的输入框，我们可以编写一个 `Form` 组件来实现这个表单。为了让 `Form` 组件更加通用，我们可以使用泛型来实现：

// 定义表单数据模型的类型
interface FormModel {
  [key: string]: any
}

// 定义表单项的类型
interface FormItem<T> {
  label: string
  prop: keyof T
}

// 定义表单组件的 props 类型
interface FormProps<T extends FormModel> {
  model: T
  items: Array<FormItem<T>>
}

// 定义表单组件
export default defineComponent<FormProps<FormModel>>({
  name: 'Form',
  props: {
    model: Object as PropType<FormModel>,
    items: Array as PropType<Array<FormItem<FormModel>>>
  },
  setup(props) {
    const handleSubmit = () => {
      // 处理表单提交逻辑
    }

    return {
      handleSubmit
    }
  }
})

在上面的代码中，我们定义了一个 `Form` 组件，它接收两个 props：`model` 和 `items`，其中 `model` 是一个泛型类型，它可以是任意一个类似于表单数据模型的对象，`items` 是一个数组，其中每个元素都是一个 `FormItem` 类型的对象，表示一个表单项。在组件中，我们使用 `keyof` 关键字来获取泛型类型 `T` 的所有属性名，然后使用 `Array<FormItem<T>>` 来表示 `items` 的类型，这样就可以在使用组件时传入任意一个数据模型和表单项，从而实现组件的通用性和灵活性。

以上是一个 Vue 3 + TypeScript 中泛型的高级运用实例，通过使用泛型，我们可以编写出更加通用、可复用的组件和方法，从而提高代码的复用性和灵活性。