TypeScript 中 Vue Props 类型定义需用 interface 显式声明结构，配合 defineProps 绑定，复杂类型须用 PropType 断言，可选属性用 ? 标注，默认值通过 withDefaults 设置且类型必须匹配，校验逻辑与接口分离。
在 TypeScript 中为 Vue 组件 Props 定义严谨接口类型，核心是用 interface 显式描述结构、配合 defineProps 绑定类型，并对复杂类型做精准标注。不靠 any，也不靠隐式推导，而是让类型契约清晰可验。
用 interface 定义 Props 结构
把 Props 的字段、类型、可选性全部写进接口里，避免内联类型字面量导致复用困难或阅读成本高。
- 字段名用 PascalCase 或 camelCase（推荐后者，与 JS 习惯一致）
- 必填字段不加 ?，可选字段明确标注
?: - 联合类型如
'success' | 'error' | 'loading'比string更安全 - 数组类型写成
string[]或Item[]，而非Array<string>
示例：
interface ButtonProps {
label: string
size: 'small' | 'medium' | 'large'
disabled?: boolean
onClick?: (e: MouseEvent) => void
icon?: { name: string; color?: string }
}
defineProps<ButtonProps>() 即可获得完整类型推导和模板中属性提示。
立即学习“前端免费学习笔记（深入）”；
处理对象和函数 Prop 的类型断言
当 Prop 是对象或函数时，Vue 默认会丢失泛型信息，必须用 PropType 显式声明。
- 对象类型：用
Object as PropType<MyType> - 函数类型：用
Function as PropType<(id: number) => void> - 数组类型：用
Array as PropType<ItemType[]>
示例：
import type { PropType } from 'vue'
interface User {
id: number
name: string
}
defineProps({
user: {
type: Object as PropType<User>,
required: true
},
onEdit: {
type: Function as PropType<(user: User) => void>
}
})
为可选 Prop 设置默认值并保持类型收敛
用 withDefaults 时，接口定义仍需保留 ? 标记；默认值类型必须严格匹配字段声明，否则会破坏类型收敛。
- 不要写
count?: number却给默认值'0' - 对象默认值建议用工厂函数：
default: () => ({ id: 0, name: '' }) - 联合类型的默认值只能是其中一种，比如
theme?: 'light' | 'dark'默认设'light'
示例：
interface CardProps {
title: string
cover?: string
tags?: string[]
}
const props = withDefaults(defineProps<CardProps>(), {
cover: '',
tags: () => []
})
嵌套结构与验证逻辑分离
接口只管“长什么样”，校验逻辑（如格式、范围）放在 validator 里，两者职责分明。
- validator 函数参数类型要与接口一致，便于类型检查
- 避免在 validator 里做副作用或异步操作
- 企业级场景可结合 Zod 或 Yup 做运行时校验，但接口仍是第一道防线
示例：
defineProps({
email: {
type: String,
required: true,
validator: (v: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)
},
maxItems: {
type: Number,
default: 10,
validator: (v: number) => v > 0 && v <= 100
}
})
不复杂但容易忽略：接口定义不是装饰，而是契约。每一条字段声明，都在告诉协作开发者“这个组件只接受什么、能保证什么”。写清楚，就少一半运行时 bug。
