JavaScript对象解构本身不提供Props校验能力，仅是提取属性的语法糖；校验需依赖PropTypes、TypeScript或手动逻辑，且必须与解构分离。
JavaScript 对象解构本身不提供 Props 校验能力，它只是语法糖，用于从对象中提取属性。真正的校验需要配合其他机制实现——比如运行时类型检查（如 PropTypes）、TypeScript 类型系统，或手动验证逻辑。
解构与校验必须分离
你可以在解构后立即做校验，但不能把校验逻辑“塞进”解构表达式里。例如：
// ❌ 错误：解构语法中不能写 if 或 throw
const { name, age } = props ?? throw new Error('props is required');
// ✅ 正确：先解构（或带默认值），再校验
const { name = '', age = 0 } = props;
if (typeof name !== 'string' || name.trim() === '') {
throw new Error('name must be a non-empty string');
}
if (!Number.isInteger(age) || age < 0) {
throw new Error('age must be a non-negative integer');
}
用默认值 + 短路校验简化逻辑
结合逻辑运算符和解构默认值，可让基础校验更紧凑：
- 用 ?? 提供安全兜底，避免 undefined 导致的错误
- 用 && 或立即执行函数做轻量断言
- 适合简单组件，不替代完整校验方案
示例：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const { title = 'Untitled', count = 0 } = props ?? {};
(title && typeof title === 'string') || console.warn('Invalid title');
(Number.isInteger(count) && count >= 0) || console.warn('Invalid count');
搭配 PropTypes（React 场景）
在 React 中，解构通常发生在函数组件内部，而校验应放在组件外部声明：
import PropTypes from 'prop-types';
function Button({ size = 'medium', variant = 'primary', onClick }) {
// 解构完成，业务逻辑开始
return <button className={`btn-${size} btn-${variant}`} onClick={onClick}>Click</button>;
}
Button.propTypes = {
size: PropTypes.oneOf(['small', 'medium', 'large']),
variant: PropTypes.oneOf(['primary', 'secondary', 'danger']).isRequired,
onClick: PropTypes.func.isRequired,
};
Button.defaultProps = {
size: 'medium',
variant: 'primary',
};
注意：PropTypes 在开发环境生效，生产环境不校验；解构仍需谨慎——比如不要对未定义的 onClick 直接调用，除非已设默认值或确认必传。
用 TypeScript 实现静态校验（推荐）
真正可靠的 Props 校验来自类型定义。解构会自动受类型约束：
interface ButtonProps {
size?: 'small' | 'medium' | 'large';
variant: 'primary' | 'secondary' | 'danger';
onClick: () => void;
}
function Button({ size = 'medium', variant, onClick }: ButtonProps) {
// TypeScript 编译期就确保 variant 是合法字面量，onClick 存在且是函数
return <button onClick={onClick}>{size} {variant}</button>;
}
此时解构即校验：如果传入 { variant: 'ghost' }，TS 会报错，根本不会运行到组件内部。
不复杂但容易忽略：解构是读取手段，校验是保障手段，二者分工明确。选对工具链（TS > PropTypes > 手动 assert）比在解构上“花式编码”更重要。
