typescript 的 props 类型断言仅在编译期生效，运行时完全擦除；必须用自定义 validator 函数+类型守卫（x is t）做运行时结构与值域校验，并推荐 zod/yup 等 schema 库替代手写逻辑。
TypeScript 的 Props 类型断言只在编译期生效，运行时完全擦除，所以无法靠 as 或类型注解做实际校验。要实现运行时兜底，必须用自定义验证函数主动检查数据结构和值域，并配合类型守卫（type guard）让 TypeScript 知道验证后可安全使用。
用类型守卫 + 运行时验证函数
核心是写一个返回 arg is T 的函数，既做校验，又告诉 TS 类型已收敛：
- 函数内部手动检查字段是否存在、类型是否匹配、值是否在预期范围内（如字符串非空、数字在区间内、对象有必需 key）
- 返回类型必须是类型谓词，例如
function isValidProps(x: unknown): x is MyProps - 验证失败时建议抛错或返回
false，便于上层控制流处理
配合非空断言与 as const 提升推导精度
若 Props 中含字面量类型（如 status: 'loading' | 'success'），单纯 as MyProps 会丢失字面量信息。可：
- 用
as const固定初始值，再传入验证函数，保留精确类型 - 验证函数内部用
typeof x === 'string' && ['loading', 'success'].includes(x)做字面量校验 - 避免直接
obj as MyProps，改用isValidProps(obj) ? obj : fallback
在组件中安全接入验证逻辑
React 组件接收 props 后不直接信任，而是先走验证：
- 可在
useEffect或自定义 Hook 中调用验证函数，校验失败时console.error或触发错误边界 - 服务端渲染（SSR）场景下，验证应放在
getServerSideProps或数据获取层，避免客户端反复校验 - 对第三方数据源（如 API 返回、localStorage）尤其需要验证，因为它们完全绕过 TS 编译检查
工具推荐：Zod 或 Yup 替代手写验证
手写验证易漏、难维护。更可靠的方式是用运行时 Schema 库：
- Zod 定义 schema 后，
schema.parse(data)返回带完整类型推导的值，TS 能自动识别字段和字面量 - Yup 支持异步验证和条件规则，适合复杂表单类 Props
- 二者都提供
safeParse方法，返回{ success: boolean; data?: T }，比布尔型守卫更易处理错误路径
