javascript - Vue 3: prop with Validator => TypeScript Error Claiming Other prop Does not Exist - Stack Overflow

admin管理员组

文章数量:1391925

In Vue (v3) adding a prop with a validator causes a TypeScript error claiming that another property does not exist. I have created a ponent illustrating the problem:

This works:

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

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

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

Now we add otherProp with a validator:

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

<script lang="ts">
import { defineComponent, puted } 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: puted(() => ('ABC_' + props.someProp + '_XYZ'))
      // Complains that `props.someProp` --^
      // is not defined here
    };
  }
});
</script>

We get an error with this message:

ERROR in src/ponents/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: puted(() => ('ABC_' + props.someProp + '_XYZ'))
       |                                                  ^^^^^^^^
    22 |       // Complains that `props.someProp` --^
    23 |       // is not defined here
    24 |     };

Using the puted object instead of the puted function in setup produces a similar result (then plaining that this.someProp does not exist, even though it does at runtime).

Why does this error occur? How could we have predicted this behaviour? Is validator still supported?

Current workaround: I dropped validator.

In Vue (v3) adding a prop with a validator causes a TypeScript error claiming that another property does not exist. I have created a ponent illustrating the problem:

This works:

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

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

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

Now we add otherProp with a validator:

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

<script lang="ts">
import { defineComponent, puted } 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: puted(() => ('ABC_' + props.someProp + '_XYZ'))
      // Complains that `props.someProp` --^
      // is not defined here
    };
  }
});
</script>

We get an error with this message:

ERROR in src/ponents/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: puted(() => ('ABC_' + props.someProp + '_XYZ'))
       |                                                  ^^^^^^^^
    22 |       // Complains that `props.someProp` --^
    23 |       // is not defined here
    24 |     };

Using the puted object instead of the puted function in setup produces a similar result (then plaining that this.someProp does not exist, even though it does at runtime).

Why does this error occur? How could we have predicted this behaviour? Is validator still supported?

Current workaround: I dropped validator.

• javascript
• typescript
• vue.js
• validation
• vuejs3

Share Improve this question Follow edited Mar 21, 2022 at 13:50 Penny Liu 17.6k55 gold badges8686 silver badges108108 bronze badges asked Jun 24, 2021 at 6:27 jonasjonas 67711 gold badge77 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Add the type to the validator parameter :

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

If that doesn't work for you or it is not enouth, it might help to wrap your props in a defineProps like that:

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

本文标签： javascriptVue 3 prop with Validator gt TypeScript Error Claiming Other prop Does not ExistStack Overflow