Vue.js + TypeScript 中如何为带条件类型的 Props 配置可区分联合类型的 Emit，避免组件内类型断言？

这个问题我之前做滑块组件时也踩过坑！核心痛点就是：你原来的 Emit 类型定义太宽泛了，只是简单复用了 typeof props.modelValue，导致 TypeScript 没法把 update:modelValue 事件的参数类型和 range 开关的状态绑定起来。手动绑定事件时，它就会把 $event 当成 number | [number, number] 联合类型，自然就和你绑定的变量类型不匹配了。

下面直接上解决方案，分步骤走：

1. 给 Emit 也配置「可区分联合类型」，和 Props 严格对齐 #

你原来的 Props 是用联合类型实现的条件分支，那 Emit 也得跟着用对应的联合类型，让 TypeScript 知道：当 range: true 时，update:modelValue 传的是数组；当 range 为 false 或不传时，传的是单个数字。

修改后的代码可以写成这样：

// 保留你原来的公共 Props 定义
interface SharedProps {
  max: number;
  min: number;
  // 其他公共 props 比如 step 等
}

// 原有的可区分联合 Props 类型不变
type Props = SharedProps & (
  | { range: true; modelValue: [number, number] }
  | { range?: false; modelValue: number }
);

// 关键：让 Emit 也和 Props 一样用联合类型分支
const emit = defineEmits<
  | { (e: 'update:modelValue', value: [number, number]): void }
  | { (e: 'update:modelValue', value: number): void }
>()

如果是复杂场景，也可以用条件类型自动推导，更灵活：

const emit = defineEmits<{
  'update:modelValue': Props extends { range: infer R }
    ? R extends true
      ? [value: [number, number]]
      : [value: number]
    : never
}>()

2. 组件内部确保 Emit 调用和 range 状态匹配 #

组件内部触发更新时，要让 TypeScript 明确知道当前 emit 的值类型和 range 是对应的，比如滑块拖动结束后的逻辑：

const props = defineProps<Props>();

// 初始化内部状态，类型和 props.modelValue 严格对齐
const internalValue = ref(
  props.range ? [...props.modelValue] : props.modelValue
) as typeof props.modelValue;

// 触发更新的示例逻辑
const handleSliderChange = () => {
  // 不用手动断言类型，TypeScript 会根据 props.range 自动推断值类型
  if (props.range) {
    emit('update:modelValue', internalValue.value);
  } else {
    emit('update:modelValue', internalValue.value);
  }
};

3. 验证使用场景 #

现在再回到你的手动绑定场景，TypeScript 就能正确推断 $event 的类型了：

场景1：不开启 range #

<script setup lang="ts">
const tempValue = ref<number>(10);
</script>

<template>
  <VelSliderInput 
    :model-value="tempValue" 
    :max="10" 
    :min="0" 
    @update:model-value="tempValue = $event" 
  />
</template>

此时 TypeScript 识别到 range 为 false，自动推断 $event 是 number，和 tempValue 类型完全匹配，不会报错。

场景2：开启 range #

<script setup lang="ts">
const tempRangeValue = ref<[number, number]>([2, 8]);
</script>

<template>
  <VelSliderInput 
    :model-value="tempRangeValue" 
    :max="10" 
    range 
    :min="0" 
    @update:model-value="tempRangeValue = $event" 
  />
</template>

这里 TypeScript 会识别到 range: true，自动推断 $event 是 [number, number]，和 tempRangeValue 类型匹配，也不会报错。

补充：为什么原来的 v-model 是正常的？ #

因为 Vue 内置的 v-model 语法糖会自动根据组件的 Props 联合类型做类型推导，它能把 v-model 绑定的变量类型和 range 开关关联起来。但手动拆分 :model-value 和 @update:model-value 时，就需要我们手动给 Emit 配置精确的类型，才能让 TypeScript 跟上这个关联逻辑。

内容来源于stack exchange