返回
创建于
状态公开

vue3 中可以使用 <script> 标签上的 generic 属性声明泛型类型参数：

ts
1<script setup lang="ts" generic="T">
2defineProps<{
3  items: T[]
4  selected: T
5}>()
6</script>

generic 的值与 TypeScript 中位于 <...> 之间的参数列表完全相同。例如，你可以使用多个参数，extends 约束，默认类型和引用导入的类型：

ts
1<script
2  setup
3  lang="ts"
4  generic="T extends string | number, U extends Item"
5>
6import type { Item } from './types'
7defineProps<{
8  id: T
9  list: U[]
10}>()
11</script>

当无法自动推断泛型组件的具体类型时，可使用指令 @vue-generic 来显式指定：

ts
1<template>
2  <!-- @vue-generic {import('@/api').Actor} -->
3  <ApiSelect v-model="peopleIds" endpoint="/api/actors" id-prop="actorId" />
4
5  <!-- @vue-generic {import('@/api').Genre} -->
6  <ApiSelect v-model="genreIds" endpoint="/api/genres" id-prop="genreId" />
7</template>

为了在 ref 中使用泛型组件的引用，你需要使用 vue-component-type-helpers 库，因为 InstanceType 在这种场景下不起作用。

ts
1<script
2  setup
3  lang="ts"
4>
5import componentWithoutGenerics from '../component-without-generics.vue';
6import genericComponent from '../generic-component.vue';
7
8import type { ComponentExposed } from 'vue-component-type-helpers';
9
10// 适用于没有泛型的组件
11ref<InstanceType<typeof componentWithoutGenerics>>();
12
13ref<ComponentExposed<typeof genericComponent>>();