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?

Answer 1

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

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