最简方式是用 | 连接多个类型；关键在于兼顾安全与实用：字面量联合+类型别名适用于枚举类 Prop，混合联合处理表单等灵活输入，需配合类型守卫缩小类型范围，Vue 中须用 PropType 显式标注。

直接用 | 符号连接多个类型即可，这是声明 Props 联合类型的最简方式。关键不是“怎么写”，而是“怎么写得既安全又实用”——既要覆盖业务中真实存在的多种取值，又要让 TypeScript 能在后续逻辑中准确缩小类型范围。

基础写法：字面量联合 + 类型别名

适合状态、模式、枚举类 Prop：

• 用字面量类型明确限定可选值，避免宽泛的 string
• 配合 type 别名提升可读性和复用性

type ButtonVariant = 'primary' | 'secondary' | 'danger';
type ButtonSize = 'sm' | 'md' | 'lg';

interface ButtonProps {
  variant: ButtonVariant;
  size: ButtonSize;
  label: string;
}

混合类型联合：处理数字/字符串/空值等真实输入

常见于表单控件、配置项等需要灵活接收不同格式的场景：

TypeScript

{"answer":"编写类型安全的 TypeScript，合理运用类型收窄、推断模式与严格模式最佳实践。"}

下载

• 把 number、string、null、undefined 等按实际允许情况组合
• 避免用 any 或 unknown 模糊兜底

type InputValue = string | number | null | undefined;

interface TextInputProps {
  value: InputValue;
  onChange: (val: InputValue) => void;
}

结合类型守卫，在组件内部安全使用

联合类型声明只是第一步；真正发挥作用，靠的是运行时判断 + TypeScript 的类型缩小：

• 用 typeof 区分原始类型（string/number/boolean）
• 用 === null 或 == undefined 处理空值分支
• 进入某个分支后，TypeScript 自动将类型收窄为该分支对应的具体类型

function TextInput({ value, onChange }: TextInputProps) {
  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 可能导致响应式丢失或类型提示弱化，需显式导入并标注：

import type { PropType } from 'vue';

const props = defineProps({
  status: {
    type: String as PropType,
    required: true
  },
  data: {
    type: [String, Number, Object] as PropType>,
    default: ''
  }
});