Vue.js + Typescript: How to set @Prop type to string array?

Question

What's the correct way to set the type attribute of the @Prop decorator to Array<string>? Is it even possible?

I'm only able to set it to Array without string like so:

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  @Prop({ type: Array, default: [] }) private readonly myProperty!: string[];
}
</script>

When I try to change it to Array<string> or even string[] I receive the following error:

Argument of type '{ type: boolean; default: never[]; }' is not assignable 
to parameter of type 'PropOptions<any> | Constructor | Constructor[] | undefined'.

Types of property 'type' are incompatible. Type 'boolean' is not assignable to type 
'(new (...args: string[]) => Function) | (() => any) | (new (...args: never[]) => any) | Prop<any>[] | undefined'.

This error message confuses me even more: why is the type now recognised as boolean?

mori · Accepted Answer · 2022-04-04 06:28:55Z

39

Adding the type assertion as PropType<string[]> helps in this case:

<script lang="ts">
import { PropType } from "vue"
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  @Prop({
    type: Array as PropType<string[]>, // use PropType
    default: () => [] // use a factory function
  }) private readonly myProperty!: string[];
}
</script>

Source: docs regarding @Prop annotation.

Also note that default Arrays and Objects should always be returned from factory functions (source). This avoids (accidentally) sharing a property among several component instances.

edited Apr 4, 2022 at 6:28

answered Sep 23, 2020 at 7:18

mori

1,17713 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js + Typescript: How to set @Prop type to string array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related