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

Question

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?

Answer 1

Ia mengembalikan ralat kerana skrip taip tidak mengetahui bahawa inputType.type dan jenis nilai adalah berkaitan.

Boleh cuba

atau ini

sssccc