Vue 3：輸入'數字|布林值'不可指派給型別「number」；

Question

我正在使用 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 嗎？有沒有辦法「強制」或「強制轉換」變數？或者我在這裡做錯了什麼？

Answer 1

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

你可以試試

或這個

sssccc