Vue3组合式API+TS中number|boolean类型props赋值报类型不匹配如何解决

先修正代码拼写错误 #

你模板里的条件判断写了intputType，多了一个t，正确属性名是inputType，这个错误会导致组件渲染逻辑异常。

类型报错的核心原因 #

Vue 3的模板语法目前还不支持自动类型收窄，即使你通过v-if判断了inputType的值，TS也没法自动把value的联合类型对应收窄到子组件需要的单一类型。

可选的解决方法 #

方法1：模板内直接做类型断言（最简单，适合逻辑简单的场景） #

你已经通过v-if保证了只有inputType为number时才会渲染InputNumber，此时value必然是数字类型，直接在模板里用as做强制类型转换即可：

<InputNumber v-if="inputType === 'number'" :value="value as number" />
<InputCheck v-if="inputType === 'check'" :value="value as boolean" />

方法2：给Props定义带关联关系的联合类型（类型更安全，推荐） #

用TS的字面量联合类型把inputType和value的类型做强绑定，从源头保证传入的属性类型匹配：

// InputBlock 的 script 部分
import InputNumber from "./InputNumber.vue"
import InputCheck from "./InputCheck.vue"
import { computed } from 'vue'

// 定义联合类型，不同inputType对应不同的value类型
type InputBlockProps = 
  | { inputType: 'number', value: number, min?: number, max?: number }
  | { inputType: 'check', value: boolean }

const props = defineProps<InputBlockProps>()

// 也可以在script里提前做类型收窄，避免模板里写断言
const inputNumberProps = computed(() => {
  if (props.inputType === 'number') {
    return { value: props.value, min: props.min, max: props.max }
  }
  return null
})

const inputCheckProps = computed(() => {
  if (props.inputType === 'check') {
    return { value: props.value }
  }
  return null
})

模板里直接用computed返回的属性即可：

<InputCheck v-if="inputCheckProps" v-bind="inputCheckProps" />
<InputNumber v-if="inputNumberProps" v-bind="inputNumberProps" />

这个方案的好处是在父组件调用InputBlock时，TS会自动校验属性是否匹配：比如传input-type="number"时如果传了布尔类型的value，会直接在调用处抛出类型错误，从根源避免类型不匹配的问题。

方法3：用渲染函数/JSX实现 #

如果组件逻辑复杂，也可以直接在script里用渲染函数或者JSX实现，TS在script逻辑里可以自动做类型收窄，不需要额外写断言：

// InputBlock script
import { h } from 'vue'
import InputNumber from "./InputNumber.vue"
import InputCheck from "./InputCheck.vue"

// 同方法2定义联合类型Props
type InputBlockProps = 
  | { inputType: 'number', value: number, min?: number, max?: number }
  | { inputType: 'check', value: boolean }

const props = defineProps<InputBlockProps>()

const renderComponent = () => {
  if (props.inputType === 'number') {
    // 这里TS自动收窄props.value为number类型，不会报错
    return h(InputNumber, { value: props.value, min: props.min, max: props.max })
  }
  return h(InputCheck, { value: props.value })
}

模板里直接渲染返回的组件即可：

<template>
  <renderComponent />
</template>

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