搜索

首页  >  问答  >  正文

Vue 3:输入'数字|布尔值'不可分配给类型“number”;

我正在使用 Vue 3 和 Composition API,目前我正在尝试在我的项目中添加 Typescript。

我有一个“全局输入”组件,我可以调用它来创建我想要的任何输入。然后,该组件将根据“inputType”道具渲染另一个输入组件。例如,我可以像这样使用全局输入:

<InputBlock input-type="number" :value="15" :min="0" :max="100" />
<InputBlock input-type="check" :value="true" />

InputBlock 看起来像这样:

<script setup lang="ts">
import InputNumber from "./InputNumber.vue"
import InputCheck from "./InputCheck.vue"

const props = defineProps({
  value: { type: [Boolean, Number], required: true }, // Here the value can be type Boolean|Number
  inputType: { type: String, required: true },
  // ...
})
</script>

<template>
  <InputCheck v-if="intputType === 'check'" :value="value" />
  <InputNumber v-if="intputType === 'number'" :value="value" /> <!-- Here it is supposed to be Number -->
</template>

我的 InputNumber 看起来像这样:

<script setup lang="ts">
const props = defineProps({
  value: { type: Number, required: true },
  // ...
}}
</script>

正如您所注意到的,InputBlock 组件可以接收不同类型的值,因为该值将由不同的子组件使用。但每个子组件的 value 属性只能接受一种类型。在我的 InputBlock 中,我收到此错误: Type 'number | boolean” 不可分配给类型“number”。类型“boolean”不可分配给类型“number”.

你知道我如何告诉 Typescript InputCheck 中传递的值将是一个 Number 而不是 Number|Boolean 吗?有没有办法“强制”或“强制转换”变量?或者我在这里做错了什么?

P粉156983446P粉156983446385 天前640

全部回复(1)我来回复

  • P粉274161593

    P粉2741615932023-12-06 11:26:45

    它返回一个错误,因为打字稿不知道 inputType.type 和值类型是相关的。

    你可以试试

    
    

    或者这个

    sssccc
    
    
    

    回复
    0
  • 取消回复