Vue 3: Die Eingabe „number|boolean“ kann nicht dem Typ „number“ zugewiesen werden.

Question

Ich verwende Vue 3 und die Composition API und versuche derzeit, Typescript zu meinem Projekt hinzuzufügen.

Ich habe eine „globale Eingabe“-Komponente, die ich aufrufen kann, um jede gewünschte Eingabe zu erstellen. Die Komponente rendert dann eine weitere Eingabekomponente basierend auf der Requisite „inputType“. Ich kann beispielsweise eine globale Eingabe wie folgt verwenden:

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

InputBlock sieht so aus:

<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>

Meiner InputNumber sieht so aus:

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

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

Wissen Sie, wie ich Typescript InputCheck mitteilen kann, dass der übergebene Wert eine Zahl statt einer Zahl|Boolean sein wird? Gibt es eine Möglichkeit, eine Variable zu „erzwingen“ oder „umzuwandeln“? Oder mache ich hier etwas falsch?

Answer 1

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

你可以试试

或者这个