最简方式是用 | 连接多个类型；关键在于兼顾安全与实用：字面量联合+类型别名适用于枚举类 prop，混合联合处理表单等灵活输入，需配合类型守卫缩小类型范围，vue 中须用 proptype 显式标注。
直接用 | 符号连接多个类型即可，这是声明 Props 联合类型的最简方式。关键不是“怎么写”，而是“怎么写得既安全又实用”——既要覆盖业务中真实存在的多种取值，又要让 TypeScript 能在后续逻辑中准确缩小类型范围。
基础写法：字面量联合 + 类型别名
适合状态、模式、枚举类 Prop：
- 用字面量类型明确限定可选值，避免宽泛的 string
- 配合
type别名提升可读性和复用性
type ButtonSize = 'sm' | 'md' | 'lg';
interface ButtonProps {
variant: ButtonVariant;
size: ButtonSize;
label: string;
}
混合类型联合：处理数字/字符串/空值等真实输入
常见于表单控件、配置项等需要灵活接收不同格式的场景：
- 把 number、string、null、undefined 等按实际允许情况组合
- 避免用
any或unknown模糊兜底
interface TextInputProps {
value: InputValue;
onChange: (val: InputValue) => void;
}
结合类型守卫，在组件内部安全使用
联合类型声明只是第一步；真正发挥作用，靠的是运行时判断 + TypeScript 的类型缩小：
- 用
typeof区分原始类型（string/number/boolean） - 用
=== null或== undefined处理空值分支 - 进入某个分支后，TypeScript 自动将类型收窄为该分支对应的具体类型
if (value === null || value === undefined) {
return onChange(e.target.value)} />;
}
if (typeof value === 'number') {
return onChange(+e.target.value)} />;
}
// 此处 value 必为 string，可放心调用 .trim()、.length 等
return onChange(e.target.value)} />;
}
Vue 中的特别注意：PropType 辅助推导
在 Vue 3 的 Composition API 中，直接写 string | number 可能导致响应式丢失或类型提示弱化，需显式导入并标注：
const props = defineProps({
status: {
type: String as PropType,
required: true
},
data: {
type: [String, Number, Object] as PropType
default: ''
}
});
