javascript - Vue 3 + typescript: type-tjek props i enkeltfilskomponent

Jeg har set i Vuetify og et andet sted, at det er muligt at tilføje en typekontrol for prop'en i template-tagget.

Lad os sige, at vi har en knapkomponent

<template>
    <div>
        <button>{{ label }}</button>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    props: {
        label: { type: String as () => string, default: '' },
    },
});
</script>

Nu i forældrekomponenten:

<button-component :label="true" />

Jeg vil få en compiler-advarsel fra selve Vue om, at det er en forkert parameter, men er det muligt at tjekke det, mens man skriver koden? Hvis ikke, hvad er så meningen med at angive ts-type i props?

Svar #1

Baseret på Typescript-supportdokumenterne er type:String tilstrækkelig, og du kan tilføje en validator, hvis du har brug for det :

export default defineComponent({
    props: {
        label: { 
          type: String ,
          default: ''
          },
    },
});

Du kunne også gøre:

export default defineComponent({
    props: {
        label: {
          type: String as PropType<string>,
          default: ''
          },
    },
});

jeg tror, syntaksen du bruger er til funktionen tjek type.

Svar #2

Hvis du vil aflevere en String og ikke en boolean, kan du gøre følgende:

<button-component :label="`true`" />

Fordi du binder, konverterer Vue-kompilatoren din sande værdi til en boolesk værdi. Så definer eksplicit et strenginput her.

Relaterede artikler