Vue 3: Input 'nombor|boolean' tidak boleh diperuntukkan untuk menaip 'nombor';

Saya menggunakan Vue 3 dan API Komposisi dan pada masa ini saya cuba menambah Typescript pada projek saya.

Saya mempunyai komponen "input global" yang boleh saya panggil untuk membuat sebarang input yang saya mahu. Komponen kemudiannya akan menghasilkan komponen input lain berdasarkan prop "inputType". Sebagai contoh, saya boleh menggunakan input global seperti ini:

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

InputBlock kelihatan seperti ini:

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

Milik saya InputNumber kelihatan seperti ini:

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

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

Adakah anda tahu bagaimana saya boleh memberitahu Typescript InputCheck bahawa nilai yang dihantar akan menjadi Nombor dan bukannya Nombor|Boolean? Adakah terdapat cara untuk "memaksa" atau "membuang" pembolehubah? Atau adakah saya melakukan sesuatu yang salah di sini?

P粉156983446361 hari yang lalu630

Vue 3: Input 'nombor|boolean' tidak boleh diperuntukkan untuk menaip 'nombor';

membalas semua(1)saya akan balas