联合类型与交叉类型组合使用，可精准建模多态组件：联合类型表达“多选一”状态（如编辑/只读态），交叉类型确保“同时具备”基础属性与分支专属属性，配合类型守卫实现安全分支访问。
联合类型和交叉类型组合使用，核心在于：用联合类型表达“多选一”的状态或配置，用交叉类型表达“同时具备”的能力与结构。二者叠加，能精准建模组件在不同场景下的完整属性契约。
联合类型界定可选模式，交叉类型聚合具体能力
组件常需支持多种预设模式（如表单有“编辑态”“只读态”“禁用态”），每种模式下允许的属性不同。这时可先用联合类型定义模式集合，再为每种模式交叉扩展专属属性：
- 定义基础能力：如
BaseProps = { label: string; required: boolean } - 定义各模式专属属性：
EditMode = { editable: true; onSave: () => void }，ReadOnlyMode = { editable: false; tooltip?: string } - 组合成完整类型：
FormProps = BaseProps & (EditMode | ReadOnlyMode)
这样既保证所有模式都含label和required，又确保onSave只在editable: true时存在，TypeScript 会在赋值或调用时自动校验是否满足当前分支的所有约束。
交叉类型合并接口，联合类型处理动态来源
当组件属性来自多个独立系统（如 UI 配置 + 后端响应 + 用户偏好），可用交叉类型整合静态契约，再用联合类型适配不同数据源的结构差异：
UIConfig = { theme: 'light' | 'dark'; spacing: number }APIResponse = { id: string; name: string; status: 'active' | 'inactive' }UserPrefs = { fontSize: 'small' | 'medium' | 'large' }- 合并基础结构：
BaseComponentProps = UIConfig & APIResponse & UserPrefs - 但后端字段名可能不一致（如
status有时叫state），此时用联合类型包裹响应变体：ApiResponseVariant = APIResponse | { id: string; name: string; state: 'online' | 'offline' } - 最终类型：
Props = BaseComponentProps & { data: ApiResponseVariant }
联合+交叉嵌套实现条件属性约束
某些属性仅在特定条件下出现（如启用验证时才需要rules数组），可借助联合类型的分支 + 交叉类型的精确合并来建模：
BaseInput = { value: string; placeholder: string }ValidatedInput = BaseInput & { validate: true; rules: Array string | null> }PlainInput = BaseInput & { validate?: false }- 完整类型：
InputProps = ValidatedInput | PlainInput
编译器会强制：若validate为true，则rules必须存在且类型正确；若validate为false或未提供，则rules不可出现。无需运行时检查，类型即文档。
搭配类型守卫提升开发体验
组合后的复杂类型，在函数内部需安全访问分支特有属性。推荐用类型守卫而非类型断言：
- 对
InputProps做判断：function renderInput(props: InputProps) { if ('rules' in props) { /* 此时 props 类型被缩小为 ValidatedInput */ return validateAndRender(props); } /* 否则为 PlainInput */ } - 利用
in操作符、字面量类型比较（props.validate === true）或自定义守卫函数，让 TypeScript 自动推导分支内的精确类型
这种写法比props as ValidatedInput更安全，也避免了重复的运行时判断逻辑。
