Vue中传递复杂数据类型需同时保障运行时校验与编译时类型安全：用接口+PropType约束对象形状，函数需明确签名，联合类型适配动态结构，泛型确保数组类型穿透，缺一不可。
Vue 中传递复杂数据类型（如对象、函数、嵌套结构、联合类型、泛型等）时，必须兼顾运行时校验与编译时类型安全。光靠 type: Object 或 type: Function 不够——它只做基础类型检查，无法约束字段、参数或返回值，容易埋下隐患。
对象类型：用接口 + PropType 明确形状
直接写 type: Object 会丢失所有内部结构信息，TS 也无法推导。正确做法是定义接口，并配合 PropType 告诉 Vue 这个对象“长什么样”：
- 定义接口描述结构：interface User { id: number; name: string; isActive: boolean }
- 在
defineProps中使用：user: { type: Object as PropType<User>, required: true } - 嵌套对象同理，比如
profile: { type: Object as PropType<{ avatar: string; bio?: string }> }
函数类型：声明参数与返回值
仅写 type: Function 会让 TS 完全失去函数签名信息。应使用函数类型字面量或接口明确入参和出参：
- 简单场景：onSubmit: { type: Function as PropType<(data: FormData) => Promise<void>>, required: true }
- 带可选参数或重载？用接口更清晰：interface Handler { (id: string): void; (id: string, meta: Record<string, any>): void }
- 注意：不要省略
as PropType<...>，否则 TS 会退化为any
联合类型与条件类型：提升配置灵活性
当一个 prop 的结构随另一个字段变化（比如 modal 类型不同，内容结构也不同），适合用条件类型建模：
立即学习“前端免费学习笔记（深入）”；
- 先定义各分支结构：type ConfirmModal = { type: 'confirm'; title: string; onConfirm: () => void }
- 再组合成联合：type ModalProps = ConfirmModal | AlertModal | CustomModal
- 最终 props 中声明：modal: { type: Object as PropType<ModalProps>, required: true }
- 组件内可用
if (props.modal.type === 'confirm')安全类型收窄
泛型数组与动态结构：用泛型约束保证类型穿透
传递列表类数据时，若元素类型不固定（如表格列配置、搜索结果项），需让泛型贯穿 props 定义与使用：
- 定义泛型 props 接口：interface ListProps<T> { items: T[]; keyField?: keyof T; renderItem?: (item: T) => string }
- 调用
defineProps<ListProps<Product>>()，TS 就能精准推导items元素类型及keyField可选字段 - 避免用
Array<any>或type: Array，否则类型链断裂
不复杂但容易忽略：运行时校验（required/default/validator）和编译时类型（TS 接口 + PropType）要双管齐下。前者防 runtime 错误，后者保开发体验和长期可维护性。
