Vue 3 中 TypeScript 泛型定义 Props 的核心是 defineProps()，实现编译期强类型契约；复杂结构用 interface 明确边界，基础类型直写，Object/Function/Array 需 PropType 辅助，默认值须 withDefaults 保障类型安全。

Vue 3 中使用 TypeScript 泛型规范 Props 类型，核心是通过 defineProps() 语法在编译期建立强类型契约。它不是运行时“泛化逻辑”，而是让组件接收的 props 具备可推导、可约束、可提示的静态类型能力。

用泛型接口定义复杂结构

对含嵌套字段、可选属性或联合值的对象类 prop，优先提取为 interface：

• 定义清晰的类型边界，比如用户信息、表单配置、选项列表
• 字段名、是否必填（?）、嵌套层级、枚举取值都一目了然
• 编辑器能自动补全字段，拼错属性名或传错类型会在编码阶段报错

示例：

interface Product { id: number; name: string; tags: string[]; status: 'draft' | 'published' | 'archived'; }
defineProps void }>();

基础类型和字面量联合类型直接写

简单字段无需额外接口，直写类型更轻量：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• title: string、loading: boolean、count: number
• 枚举场景用字面量联合类型，如 theme: 'light' | 'dark'，IDE 会提示合法值
• 数组明确元素类型：items: string[] 或 items: User[]，避免 Array 或 any[]

函数与对象类型必须用 PropType

TypeScript 泛型无法单独表达 Object 或 Function 的内部结构，需搭配 PropType：

• 对象：用 Object as PropType，保留字段级类型检查
• 函数：用 Function as PropType void>，确保回调签名匹配
• 数组类型也需 Array as PropType，否则类型信息丢失

默认值要配合 withDefaults 保持类型安全

泛型声明本身不支持 default，必须用 withDefaults 包裹：

• 设了默认值的可选字段（如 count?: number），若 default 为 0，则 props.count 类型就是 number，不是 number | undefined
• 引用类型默认值必须用工厂函数：config: () => ({ lang: 'zh' })，防止多个实例共享同一对象
• 函数类型默认值可直接写：onClose: () => {}，无需包裹

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！