Vue 3:类型 'number | boolean' 不可分配给类型 'number'
Vue 3 : Type 'number | boolean' is not assignable to type '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' is not assignable to type 'number'. Type 'boolean' is not assignable to type 'number'.
.
你知道我如何告诉 Typescript InputCheck
中传递的值将是数字而不是数字|布尔值吗?有没有办法“强制”或“投射”变量?或者我做错了什么?
它的 return 是一个错误,因为打字稿不知道 inputType.type 和值类型是相关的。
你可以试试你的
<template>
<InputCheck v-if="typeof value === 'boolean'" :value="value" />
<InputNumber v-if="typeof value === 'number'" :value="value" /> <!-- Here it is supposed to be Number -->
</template>
或这个
<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
})
const isBoolean = (value: any) => typeof value === "boolean"
const isNumber = (value: any) => typeof value === "number"
</script>
<template>
<InputCheck v-if="isBoolean(value)" :value="value" />
<InputNumber v-else-if="isNumber(value)" :value="value" /> <!-- Here it is supposed to be Number -->
</template>
我正在使用 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' is not assignable to type 'number'. Type 'boolean' is not assignable to type 'number'.
.
你知道我如何告诉 Typescript InputCheck
中传递的值将是数字而不是数字|布尔值吗?有没有办法“强制”或“投射”变量?或者我做错了什么?
它的 return 是一个错误,因为打字稿不知道 inputType.type 和值类型是相关的。
你可以试试你的
<template>
<InputCheck v-if="typeof value === 'boolean'" :value="value" />
<InputNumber v-if="typeof value === 'number'" :value="value" /> <!-- Here it is supposed to be Number -->
</template>
或这个
<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
})
const isBoolean = (value: any) => typeof value === "boolean"
const isNumber = (value: any) => typeof value === "number"
</script>
<template>
<InputCheck v-if="isBoolean(value)" :value="value" />
<InputNumber v-else-if="isNumber(value)" :value="value" /> <!-- Here it is supposed to be Number -->
</template>