真正有效的解法是用联合类型表达状态分支、交叉类型保证基础共性与分支专属、类型守卫实现安全访问：先定义inputmode联合类型区分互斥模式，再与baseinputprops交叉组合，最后通过isnormalmode等类型守卫在setup中安全分支处理。
在 Vue + TypeScript 项目中，面对多态组件（比如表单控件、卡片、模态框等）的属性定义，直接用 any 或过度宽松的接口会失去类型安全；而硬写一个“大而全”的接口又会导致属性冗余、校验失效、IDE 提示不准。真正有效的解法是：用联合类型表达“状态分支”，再用交叉类型保证“基础共性 + 分支专属”，最后靠类型守卫实现安全访问。
用联合类型区分组件模式
先明确组件有哪些互斥状态——比如输入框可能是“普通”“验证中”“只读”“禁用”四种模式，每种模式下允许的 props 不同：
-
避免写成：
{ value: string; rules?: Rule[]; disabled?: boolean; readonly?: boolean; loading?: boolean }——所有字段可选，TypeScript 无法约束组合合法性 -
推荐写法：定义清晰的模式联合类型：
type InputMode =<br> | { mode: 'normal'; rules?: Rule[] }<br> | { mode: 'validating'; loading: true }<br> | { mode: 'readonly'; readonly: true; tooltip?: string }<br> | { mode: 'disabled'; disabled: true };
用交叉类型合并基础属性与模式专属属性
基础属性（如 label、v-model 绑定、size）所有模式都该有；专属属性（如 rules 只属于 normal，tooltip 只属于 readonly）必须隔离。这时交叉类型就是天然 glue：
- 定义公共基类：
type BaseInputProps = { label: string; size: 'sm' | 'md' | 'lg'; modelValue: string; }; - 组合完整类型：
type InputProps = BaseInputProps & InputMode; - 效果：
– 赋值时必须同时满足BaseInputProps和某一分支的全部字段；
–rules在mode: 'normal'下才被识别为合法属性；
– IDE 智能提示会随mode值自动切换可用字段。
在 setup 中用类型守卫做安全分支处理
模板里可以直接用 v-if 判断 props.mode，但在 setup 逻辑中，需让 TypeScript 知道当前分支的具体类型：
- 写一个类型谓词函数：
function isNormalMode(props: InputProps): props is InputProps & { mode: 'normal' } {<br> return props.mode === 'normal';<br>} - 在逻辑中使用：
if (isNormalMode(props)) {<br> // 此处 props.rules 和 props.mode 都可安全访问<br> validate(props.rules);<br>} - Vue 3 的
defineProps支持泛型推导，配合上述定义，props类型会自动收窄，无需额外断言。
结合 Props 解构和泛型提升复用性
当多个组件共享同一套模式体系（如所有表单控件都支持 normal/readonly/disabled），可抽象为泛型工具类型：
type ModeProps<t extends string> = { mode: T } & (T extends 'normal' ? { rules?: Rule[] } : T extends 'readonly' ? { tooltip?: string } : {});</t>- 再与基础 props 交叉：
type ReusableInputProps = BaseProps & ModeProps; - 这样既保持类型精确，又避免重复定义模式分支，适合中大型组件库的类型体系建设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
