TypeScript 接口严格校验 Props 的核心是 defineProps<T>() 泛型绑定，实现编译期类型检查、IDE 智能提示与默认值/可选性自动受控；需用 interface 明确定义字段、嵌套结构及联合类型，并配合 defineEmits 类型化事件载荷。
在 setup 中用 TypeScript 接口严格校验 Props，核心是靠 defineProps<T>() 直接绑定接口类型，而不是依赖运行时 props 配置对象。这种方式让类型检查发生在编码和编译阶段，IDE 能实时提示、跳转、推导，默认值和可选性也自动受控。
用 interface 定义结构，再传给 defineProps
把 props 的字段、类型、是否可选、嵌套结构全部写进一个 interface，然后作为泛型参数传给 defineProps：
- 接口定义清晰分离，方便复用（比如多个组件共用
UserProps） - TypeScript 自动识别
?表示可选、默认值类型匹配、对象嵌套合法性 - 编辑器悬停就能看到完整结构，不用点进
props: { }猜字段
示例：
interface ButtonProps {
label: string
size?: 'small' | 'medium' | 'large'
disabled?: boolean
icon?: { name: string; color?: string }
}
const props = defineProps<ButtonProps>()
复杂类型用联合类型或泛型建模
当一个 prop 可能有多种形态（比如支持字符串、数组、函数），别用 any 或 unknown，而要显式列出所有合法类型：
- 基础联合：
title: string | number | (() => string) - 响应式配置类：
width: number | { xs: number; sm: number; md?: number } - 需要动态推导时，配合
as const保留字面量精度，比如mode: 'edit' | 'view'能触发 IDE 自动补全
运行时校验只补业务规则，不替代类型系统
TypeScript 类型只在开发和构建时起作用。如果需要在浏览器中验证值是否符合业务逻辑（比如 URL 必须以 https 开头、数字必须为正），才加 validator 和 PropType：
- 先确保类型正确，再用
validator做深层判断 - 对象/数组类 prop 必须用工厂函数写
default，否则多个实例共享引用 - 例如：
type: Object as PropType<Config>+validator: (v) => v.timeout > 0 && v.apiUrl.startsWith('https://')
事件载荷也要同步类型化
Props 有类型，emit 的事件参数同样不能放任不管。用 defineEmits 配合接口或元组，保证父子组件之间事件通信也受约束：
- 简单事件：
defineEmits<['update:modelValue', string]>() - 多事件混合：定义接口明确每个事件的参数个数和类型，调用
emit('submit', { name, email })时类型不匹配会直接报错 - 避免只写
emits: ['change']然后随意传参——这等于绕过整个类型系统
