Vue3新特性如何使用 结合 TypeScript 定义 Props

Vue 3 结合 TypeScript 定义 Props 的核心是 defineProps 编译器宏，支持泛型接口（类型安全、零运行时开销）、withDefaults（设默认值需工厂函数防共享引用）、运行时配置对象（含 validator 和 required 校验），区别于 Options API 的 this.props 和 prop 选项对象。

Vue 3 结合 TypeScript 定义 Props 的核心是 defineProps 编译器宏，它在 `` 中直接声明、类型安全、零运行时开销。关键不在于“写法多”，而在于选对场景——简单传值用泛型接口，带默认值用 withDefaults，需校验或复杂逻辑则用运行时配置对象。

基础类型声明：用接口最清晰

适合明确结构、强类型约束的场景。直接定义接口，TypeScript 自动推导 props 类型和响应式行为：

1. 在 `` 中声明接口，如 interface ButtonProps { size?: 'sm' | 'md' | 'lg'; disabled?: boolean; onClick: () => void }
2. 调用 defineProps<ButtonProps>()，无需 import，编辑器立刻提示属性名和类型
3. 可选属性自动标记为可选（如 size?），必填项缺失会触发 TS 编译报错

带默认值：配合 withDefaults 更可靠

纯类型接口无法设默认值，必须搭配 withDefaults —— 它返回一个增强版 props，既保类型又保默认逻辑：

1. 先定义接口，例如 interface ListProps { items: string[]; title?: string }
2. 再用 withDefaults(defineProps<ListProps>(), { title: '列表标题', items: () => [] })
3. 注意：对象/数组默认值必须是工厂函数（() => []），否则会共享引用

运行时校验：需要 validator 或 required 时才用对象写法

当需动态校验（如枚举值判断）、或兼容非 TS 环境时，用运行时配置对象更灵活：

1. defineProps({ status: { type: String as PropType, validator: v => ['success', 'error'].includes(v) } })
2. required: true 显式声明必填，TS 不报错但 Vue 运行时会警告
3. 基础类型如 Number、String 可直接写（非字符串字面量），但建议统一用 PropType 提升可读性

与 Options API 的区别要点

不用 this.props.xxx，也不用 props: { ... } 选项对象。所有声明都在 `` 顶层：

1. Options API 需 PropType 辅助（如 Object as PropType<User>），Composition API 直接写 { user: User }
2. 默认值设置方式不同：Options API 在 prop 对象里写 default，Composition API 用 withDefaults 或工厂函数
3. 编译阶段处理，最终生成的 JS 不含 defineProps，体积更小，类型信息只用于开发期校验