Props 安全依赖 TypeScript 编译期约束与运行时校验协同：须用 interface/type 显式定义类型，禁用内联 any；复杂类型需 PropType 泛型断言；validator 仅校验业务逻辑；引用类型默认值必须工厂函数。
Props 属性在生产环境中的“绝对安全”不是靠运行时兜底实现的，而是靠 TypeScript 编译期约束 + 合理的运行时补充校验共同构筑防线。真正能拦截 90% 以上问题的，是类型定义本身是否严谨、是否覆盖边界场景，而不是等组件挂了才看 console 警告。
用 interface 显式定义结构，不依赖推导
不要在 defineProps 里写内联类型或 any，所有 props 必须通过 interface 或 type 声明。比如用户卡片组件：
✅ 正确做法：
- 单独建
UserCardProps.ts文件，定义完整接口 - 必填字段不加
?，可选字段明确标注，嵌套对象也展开约束 - 枚举值用字面量联合（
'primary' | 'secondary'），不用 string
❌ 避免写法：defineProps({ title: String, config: Object }) —— 这类写法 TypeScript 无法校验字段名、缺失键、嵌套结构，生产环境一旦传错字段，编译不报错，运行时才出问题。
复杂类型必须用 PropType + 泛型精准断言
数组、对象、函数这些类型，仅写 Array 或 Object 是无效的。TypeScript 不会检查其内部结构，运行时 props 也可能为 undefined 或格式错误。
关键操作：
- 对象：用
Object as PropType<UserConfig>，而非Object - 数组：直接写
items: Product[]（组合式 API 中推荐），或Array as PropType<Product[]> - 函数：必须带参数与返回值类型，如
onSelect: Function as PropType<(id: string) => void>
这样 IDE 能提示参数、自动补全字段，tsc 编译时也能捕获 config.baseUrl 写成 config.baseURL 这类拼写错误。
validator 补业务逻辑，不替代类型检查
TypeScript 只管“是不是这个类型”，validator 才管“这个值合不合理”。两者分工明确：
- URL 字段类型是 string，但要确保非空且以 https:// 开头
- timeout 类型是 number，但要限制大于 0 且为整数
- 配置对象必须包含
baseUrl且为字符串
validator 返回 false 时，Vue 在开发环境会打印警告，不影响渲染；生产环境虽不报错，但配合 Sentry 或自定义监控可捕获异常传参，形成可观测闭环。
默认值必须工厂函数，尤其引用类型
Object 和 Array 是引用类型，直接写 default: { a: 1 } 会导致多个组件实例共享同一对象，一处修改，全局响应 —— 这类 bug 极难复现，但后果严重。
统一规则：
- 所有
Object默认值 →default: () => ({ theme: 'light' }) - 所有
Array默认值 →default: () => ['tag1', 'tag2'] - 基础类型（string/number/boolean）可直写，如
default: 'default'
这项约束在开发期就强制执行，配合 ESLint 规则（如 vue/require-prop-type-constructor）可杜绝手误。
