vue 3 的 结合 typescript 编写泛型组件需在标签上用 generic 属性声明类型参数并加 extends 边界约束，使 props、emits、slots 和 expose 均自动继承泛型类型，提升复用性与类型安全。
Vue 3 的 <script setup></script> 结合 TypeScript 编写泛型组件，核心是用 generic 属性 声明类型参数，并让 props、emits、slots 和内部逻辑都基于该泛型做约束。这不是语法糖的“炫技”，而是真正提升组件复用性和类型安全的关键手段。
明确声明泛型参数
在 <script setup></script> 标签上添加 generic="T"（可多个，如 generic="T, U"），并推荐加上边界约束，避免类型失控：
<script setup lang="ts" generic="T extends { id: string | number; label: string }"></script>- 这样传入的数组项、事件载荷、插槽作用域变量都能被 IDE 精准推导
- 不写
extends边界会导致T被推为unknown，失去类型提示
Props 和 Emits 自动适配泛型
defineProps 和 defineEmits 无需额外泛型标注，它们会自动从 script 的 generic 中继承类型参数：
-
const props = defineProps();→props.items[0].id可点出、可校验 -
const emit = defineEmits();→ 调用emit('select', xxx)时，xxx必须满足T的结构
插槽与 expose 也受泛型影响
作用域插槽和 expose 暴露的方法同样能获得泛型上下文：
- 模板中写
<slot :item="item" :index="i"></slot>，父组件使用时v-slot="{ item }"中的item类型就是T -
defineExpose({ getValue: (): T => selectedItem.value });→ 外部通过ref调用getValue()得到的值类型即为T
避免常见错误
泛型组件容易掉进的坑，往往不是写法问题，而是设计意识偏差：
- 别用
any或Record<string unknown></string>替代泛型——看似灵活，实则放弃编译期检查 - 不要在泛型组件内部硬编码具体类型（比如只处理
string[]），否则就失去了泛型意义 - 如果泛型约束复杂（如多字段联合类型），建议抽成独立 interface 并在 types.ts 中导出，便于复用和文档化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
