首頁  >  問答  >  主體

Vue 3:輸入'數字|布林值'不可指派給型別「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」 無法指派給型別「number」。型別「boolean」無法指派給型別「number」.

你知道我如何告訴 Typescript InputCheck 中傳遞的值將會是一個 Number 而不是 Number|Boolean 嗎?有沒有辦法「強制」或「強制轉換」變數?或者我在這裡做錯了什麼?

P粉156983446P粉156983446318 天前591

全部回覆(1)我來回復

  • P粉274161593

    P粉2741615932023-12-06 11:26:45

    它會傳回一個錯誤,因為打字稿不知道 inputType.type 和值類型是相關的。

    你可以試試

    
    

    或這個

    sssccc
    
    
    

    回覆
    0
  • 取消回覆