javascript - Vue 3: prop med Validator => TypeScript-fel som hävdar att annan prop inte finns

I Vue (v3) orsakar tillägg av en prop med en validator ett TypeScript-fel som hävdar att en annan egenskap inte finns. Jag har skapat en komponent som illustrerar problemet:

Det här fungerar:

<template>
  <div>{{myComputed}}</div>
</template>

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

export default defineComponent({
  name: 'MyComponent',
  props: {
    someProp: String
  },
  setup(props) {
    return {
      myComputed: computed(() => ('ABC_' + props.someProp + '_XYZ'))
    };
  }
});
</script>

Nu lägger vi till otherProp med en validator:

<template>
  <div>{{myComputed}}</div>
</template>

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

export default defineComponent({
  name: 'MyComponent',
  props: {
    someProp: String,
    otherProp: {
      type: String,
      default: '',
      validator: (v) => (true) // <- Problem occurs when
                               //    adding this line
    }
  },
  setup(props) {
    return {
      myComputed: computed(() => ('ABC_' + props.someProp + '_XYZ'))
      // Complains that `props.someProp` --^
      // is not defined here
    };
  }
});
</script>

Vi får ett fel med detta meddelande:

ERROR in src/components/MyComponent.vue:21:50
TS2339: Property 'someProp' does not exist on type 'Readonly<LooseRequired<Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 17 more ...; flat?: unknown[] | undefined; }> | Readonly<...>>>'.
    19 |   setup(props) {
    20 |     return {
  > 21 |       myComputed: computed(() => ('ABC_' + props.someProp + '_XYZ'))
       |                                                  ^^^^^^^^
    22 |       // Complains that `props.someProp` --^
    23 |       // is not defined here
    24 |     };

Att använda computed-objektet istället för computed-funktionen i setup ger ett liknande resultat (och klagar sedan på att this.someProp inte finns, även om det gör det vid körning).

Varför uppstår detta fel? Hur hade vi kunnat förutse detta beteende? Är validator fortfarande stödd?

Nuvarande lösning: Jag tog bort validator.

Svar #1

Lägg till typen på validator-parametern:

otherProp: {
  type: String,
  default: '',
  validator: (v:string) => (true)
                // ^-----------
}

Svar #2

Om det inte fungerar för dig eller om det inte är tillräckligt, kan det hjälpa att slå in dina props i en defineProps på det här sättet:

  props: defineProps({
    otherProp: {
      type: String,
      default: '',
      validator: (v) => (true)
    }
  }),

Relaterade artiklar