TypeScript类型兼容问题：多类型变量传入受限Prop如何通过校验？

你遇到的是典型的联合类型收窄场景，以下是几种无需额外变量就能通过TypeScript校验的可行方案：

1. 直接使用类型断言 #

既然你明确知道传入LW2Modal的selectedType只会是a | b | null类型，直接在绑定处做类型断言即可快速解决：

<LW2Modal v-model="selectedType as Ref<a | b | null>" />

这种方式简单高效，但需要你自己保证运行时selectedType确实不会是c类型，否则可能引发运行时错误。

2. 用类型守卫做类型收窄 #

如果想兼顾类型安全，可定义一个类型守卫函数来判断当前值是否符合组件要求的类型，再结合条件渲染：

// 在组件脚本中定义类型守卫
const isABType = (val: a | b | c | null): val is a | b | null => {
  // 这里根据c接口独有的属性做判断，比如c有一个独有的propC字段
  return val !== null && !('propC' in val);
};

模板中使用条件渲染配合类型守卫：

<LW2Modal v-model="selectedType" v-if="isABType(selectedType)" />

TypeScript会自动识别v-if中的类型判断，将selectedType的类型收窄为a | b | null，不会触发类型错误。

3. 拆分v-model手动处理类型转换 #

如果不想用断言或类型守卫，也可以拆分v-model为model-value和update:model-value，手动处理类型转换：

<LW2Modal 
  :model-value="selectedType.value as a | b | null"
  @update:model-value="(val) => selectedType.value = val"
/>

这种方式更灵活，适合需要对更新值做额外处理的场景，同时也能通过TypeScript校验。

内容的提问来源于stack exchange，提问作者Hex