Vue 3:输入'number 000-Boolean‘不能指定键入'number’

Question

我使用Vue 3和复合API，目前我正在尝试在我的项目中添加类型记录。

我有一个“全局输入”组件，我调用它来创建我想要的任何输入。然后，该组件将根据"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'.。

你知不知道我怎么能告诉打字本，InputCheck中传递的值是一个数字，而不是数字?布尔值？有没有办法“强迫”你“投”“变量”？还是在这里做错事？

Answer 1

它返回一个错误，因为类型记录不知道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>