Vue 3 : L'entrée « numéro|booléen » n'est pas attribuable au type « numéro » ;

Question

J'utilise Vue 3 et l'API Composition et j'essaie actuellement d'ajouter Typescript à mon projet.

J'ai un composant "entrée globale" que je peux appeler pour créer n'importe quelle entrée de mon choix. Le composant restituera ensuite un autre composant d'entrée basé sur le prop "inputType". Par exemple, je peux utiliser une entrée globale comme celle-ci :

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

InputBlock ressemble à ceci :

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

Le mien InputNumber ressemble à ceci :

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

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

Savez-vous comment je peux dire à Typescript InputCheck que la valeur transmise sera un nombre au lieu d'un nombre | Booléen ? Existe-t-il un moyen de « contraindre » ou de « lancer » une variable ? Ou est-ce que je fais quelque chose de mal ici ?

Answer 1

Il renvoie une erreur car TypeScript ne sait pas que les types inputType.type et value sont liés.

Vous pouvez l'essayer

ou ceci

sssccc