vue 3 中 props 的 typescript 类型校验需编译期静态约束与运行时兜底验证结合：用 defineprops 泛型声明类型，interface 约束对象，数组明确元素类型，枚举用字面量联合类型；withdefaults 提供默认值并保持类型安全；proptype + validator 实现运行时校验；引用类型默认值须用工厂函数。
Vue 3 中 Props 使用 TypeScript 进行类型校验，核心是“编译期静态约束 + 运行时兜底验证”双层保障。光靠类型声明不够，光靠运行时校验也不稳——两者配合才能真正防住传参错误。
用 interface/type 做静态类型声明
在 <script setup lang="ts"></script> 中，直接用泛型调用 defineProps 是最推荐的方式：
- 基础字段写直白类型：比如
title: string、disabled: boolean - 对象类 prop 提取为
interface，例如用户信息、配置项，能约束字段名、可选性、嵌套层级 - 数组明确元素类型：
items: Product[]，不写Array或any[] - 枚举值用字面量联合类型：
status: 'loading' | 'done' | 'error'，编辑器自动提示可选值
用 withDefaults 补默认值并保类型安全
纯类型声明模式下不能直接写 default，必须搭配 withDefaults：
- 语法是
withDefaults(defineProps<t>(), { ... })</t> - 默认值会参与类型推导，比如
count?: number设默认为0，那props.count就是确定的number类型，不是number | undefined - 可选字段设了默认值后，访问时无需非空断言或可选链（如
props.title.trim()可直接调）
用 PropType + validator 做运行时校验
TypeScript 类型只在开发期生效，动态数据（接口返回、URL 参数、localStorage）仍需运行时把关：
- 导入
PropType，把接口转为运行时类型：config: Object as PropType<config></config> -
validator函数接收实际值，返回布尔值；校验失败时控制台报黄 warning，不影响渲染 - 适合检查业务规则，比如
url.startsWith('https://')、timeout > 0、或枚举值是否合法：['primary', 'success'].includes(value)
引用类型默认值必须用工厂函数
对象、数组等引用类型作为默认值，若不包裹成函数，多个组件实例会共享同一份内存：
- ✅ 正确：
default: () => ({ theme: 'light', fontSize: 14 }) - ✅ 正确：
default: () => ['tag1', 'tag2'] - ❌ 错误：
default: { theme: 'light' }（所有实例共用该对象） - 注意：函数类型默认值不用工厂函数，直接写
default: () => {}即可
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
