第六阶段：Vue生态高级整合与优化(第91天)Vue+TypeScript进阶：泛型组件封装（支持类型推导）+ 类型声明文件

以下是关于Vue 3 TypeScript中泛型组件封装与类型推导的完整说明包含类型声明文件的使用一、泛型组件封装核心步骤1. 定义泛型Props接口// 使用泛型参数T声明Props interface GenericPropsT { items: T[]; // 泛型数组 selected: T | null; // 当前选中项 renderItem: (item: T) VNode; // 渲染函数 }2. 组件实现Composition APIimport { defineComponent, PropType } from vue; export default defineComponent({ props: { items: { type: Array as PropTypeT[], required: true }, selected: { type: Object as PropTypeT | null, default: null }, renderItem: { type: Function as PropType(item: T) VNode, required: true } }, setup(props) { // 使用props.items时自动推导T的类型 const handleSelect (item: T) { emit(update:selected, item); }; return { handleSelect }; } });二、类型推导增强方案1. 使用泛型函数声明// 声明泛型组件构造函数 interface GenericComponent { // 泛型推导关键点 new T(props: GenericPropsT): ComponentGenericPropsT; } // 类型声明增强 declare module vue { interface GlobalComponents { GenericList: GenericComponent; // 全局注册推导 } }2. 推导效果示例script setup langts import GenericList from ./GenericList.vue; interface User { id: number; name: string; } const users: User[] [{ id: 1, name: Alice }]; /script template !-- 自动推导出TUser类型 -- GenericList :itemsusers :renderItem(user) $slots.default?.({ user }) / /template三、类型声明文件.d.ts1. 组件类型声明// components.d.ts declare module /components/GenericList.vue { import { DefineComponent } from vue; // 泛型组件类型定义 interface ComponentTypeT extends DefineComponent { // 支持泛型props推导 new (): { $props: GenericPropsT }; } const component: ComponentTypeany; export default component; }2. 全局类型扩展// global.d.ts import GenericList from /components/GenericList.vue; declare module vue/runtime-core { export interface GlobalComponents { GenericList: typeof GenericList; // 全局组件类型 } }四、关键技术点说明泛型穿透机制通过defineComponent的泛型参数传递类型defineComponentGenericPropsT({...})配合PropType强制转换类型声明渲染函数类型安全// 约束renderItem返回值 renderItem: { type: Function as PropType(item: T) VNode, validator: (fn: any) typeof fn function }事件类型推导// 声明泛型事件 const emit defineEmits{ (e: update:selected, item: T): void }();五、完整示例表格组件!-- GenericTable.vue -- script langts genericT extends { id: string | number } import { defineComponent, type PropType } from vue; export default defineComponent({ props: { data: { type: Array as PropTypeT[], required: true }, columns: { type: Array as PropTypeArray{ key: keyof T; title: string; }, required: true } }, setup(props) { // props.columns[0].key 自动推导为T的键名 } }); /script六、注意事项Vue版本要求Vue 3.3 对泛型组件有原生支持类型约束使用extends限制泛型范围genericT extends { id: number }IDE兼容性VS Code需安装Volar插件通过以上实现组件将获得完整的类型推导能力并在模板中使用时提供准确的类型提示。