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