Vue3组件切换输入/多选框时TypeScript类型错误解决方案求助

你当前的组件根据select-box属性切换渲染输入框或多选选择器，但TypeScript无法识别select-box和modelValue类型的关联关系，导致赋值数组时触发类型错误。下面是不拆分组件、不修改现有InputComponent的可行方案：

解决方案：用泛型+条件类型约束Props #

通过给组件定义泛型Props，让TypeScript根据selectBox的布尔值自动推断modelValue的类型，实现类型联动。

修改后的ExampleComponent脚本： #

<script setup lang="ts">
// 定义泛型Props：当selectBox为true时，modelValue必须是数组；为false时是string/number
type Props<T extends boolean> = {
  modelValue: T extends true ? (string[] | number[]) : (string | number)
  selectBox: T
}

// 用泛型方式定义props，并指定默认值
const props = withDefaults(defineProps<Props<boolean>>(), {
  selectBox: false
})

// 定义对应类型的emit
const emit = defineEmits<{
  'update:modelValue': [value: Props<typeof props.selectBox>['modelValue']]
}>()

// 定义computed，自动推导类型
const modelValueCopy = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value as Props<typeof props.selectBox>['modelValue'])
  }
})
</script>

模板部分无需修改： #

<template>
  <div class="component-wrapper-with-stylings">
    <InputComponent v-if="!selectBox" v-model="modelValueCopy" />
    <SelectComponent v-if="selectBox" v-model="modelValueCopy" />
  </div>
</template>

父组件使用时的类型提示： #

当你在父组件中设置select-box为true时，TypeScript会自动要求v-model绑定的变量是数组类型；设置为false时则要求是string/number，彻底解决类型错误：

<template>
  <!-- 此时example必须是数组类型，否则TS报错 -->
  <ExampleComponent v-model="example" select-box></ExampleComponent>

  <!-- 此时exampleStr必须是string/number类型 -->
  <ExampleComponent v-model="exampleStr"></ExampleComponent>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const example = ref<string[]>([])
const exampleStr = ref('')
</script>

关键说明： #

• 泛型Props<T>通过条件类型T extends true ? ... : ...实现了selectBox和modelValue的类型关联
• defineEmits使用类型字面量定义，确保emit的值类型和props的modelValue类型完全匹配
• computed的setter中用类型断言辅助TypeScript推导，避免不必要的类型报错

内容的提问来源于stack exchange，提问作者c.m.