vue-property-decorator @Prop How to use interface to define an array

Question

'use strict'

import Vue from 'vue'
import { Prop, Watch } from 'vue-property-decorator'

interface ITabs {
    name: string
    value: string
}

export default class extends Vue {
    @Prop({
        type: Array,
        default() {
            return []
        }
    })
    public tabs!: ITabs[] // TS2416
}

TS2416: Property 'tabs' in type 'default' is not assignable to the same property in base type 'object & Record & Vue'. Type 'ITabs[]' is not assignable totype '{ name: ""; value: ""; }[] | undefined'. Type 'ITabs[]' is not assignable to type '{ name: ""; value: ""; }[]'. Type 'ITabs' is not assignable to type '{ name: ""; value: ""; }'. Types of property 'name' are incompatible. Type 'string' is not assignable to type '""'.

I want to use interface in the Prop Array, what do I do?

Ofelia Muradova · Accepted Answer · 2018-11-02 12:29:15Z

3

In case anyone struggles with it like I did, this is what worked for me:

@Prop({ default: () => {
        return [ ]
    }
    }) private tabs!: ITabs[];

answered Nov 2, 2018 at 12:29

Ofelia Muradova

1554 silver badges18 bronze badges

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

1 Comment

cadenzah Over a year ago

This works like a charm! Really appreciate it but now I'm wondering why this usage works...

Collectives™ on Stack Overflow

vue-property-decorator @Prop How to use interface to define an array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related