Typescript / Vuejs not compiling for computed property

Question

I'm starting to learn typescript & Vuejs.

Can anyone explain me why I can't access the account property in data from the computed allChecked()?

import * as Vue from "vue";

declare var accounts: any[];    

var app = new Vue({
    el: '#vueowner',
    data: {
        accounts: accounts,
        hasAccount: this.accounts.length > 0,
        checkedAccounts: []
    },
    computed: {
        allChecked() {
            return this.accounts.length === this.checkedAccounts.length;
        }
    }
})

I have this errors

ERROR in index.ts
(25,25): error TS2339: Property 'accounts' does not exist on type 'Vue'.

ERROR in index.ts
(25,50): error TS2339: Property 'checkedAccounts' does not exist on type 'Vue'.

Answer 1

Looks like you need to annotate the return types because TypeScript has difficulties inferring the types of certain methods.

so instead of

allChecked() {
   return this.accounts.length === this.checkedAccounts.length;
}

try this

allChecked(): boolean {
   return this.accounts.length === this.checkedAccounts.length;
}

Answer 2

In your allChecked method the this keyword isn't referencing the option object you are passing to the Vueconstructor, but the instance of the Vue class itself.

You will need to create a class that extends Vue with the properties you wish to add to the original class :

import * as Vue from "vue";

class MyVue extends Vue {
    accounts: any[];
    checkedAccounts: any[];
}

const app = new MyVue({
    // (...)
})

If you need more information about using Vue.js with Typescript check out this page: https://vuejs.org/v2/guide/typescript.html