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'.

what is in your 'vue' imported file ? a d.ts file ?

Boris K
– Boris K

2017-06-20 13:17:03 +00:00
Commented Jun 20, 2017 at 13:17 — Boris K
– Boris K, Commented Jun 20, 2017 at 13:17
imports are the ones from Vuejs 2 typings

JuChom
– JuChom

2017-06-20 13:20:40 +00:00
Commented Jun 20, 2017 at 13:20 — JuChom
– JuChom, Commented Jun 20, 2017 at 13:20

RMcfarlane · Accepted Answer · 2017-12-28 11:44:54Z

15

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;
}

answered Dec 28, 2017 at 11:44

RMcfarlane

4965 silver badges10 bronze badges

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

1 Comment

Kael Watts-Deuchar Over a year ago

This is the correct answer. Their documentation even says that you have to annotate return types for computed properties and render functions: vuejs.org/v2/guide/typescript.html#Annotating-Return-Types

tony19 · Accepted Answer · 2022-07-15 04:30:13Z

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://v2.vuejs.org/v2/guide/typescript.html

edited Jul 15, 2022 at 4:30

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 20, 2017 at 13:31

Lyrkan

1,06310 silver badges18 bronze badges

2 Comments

JuChom Over a year ago

If true, why this line is working in the data section: hasAccount: this.accounts.length > 0?

Lyrkan Over a year ago

I would guess that it is compiling (since this should have the type any right there) but not working as you intend it to (probably a Cannot read property 'length' of undefined at runtime). It should definitely be hasAccounts: accounts.length.

Tony Tom · Accepted Answer · 2019-03-04 07:40:22Z

0

This is a good article to start with VuejS with Typescript

https://johnpapa.net/vue-typescript/

<template>

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

  export default class App extends Vue {
    public accounts: any = []; 
    public checkedAccounts: any = [];
    public created(): void {
        this.accounts = [];
        this.checkedAccounts= [];
    }
   public allChecked(): boolean {
    return this.accounts.length === this.checkedAccounts.length;
   }
  }
</script>

answered Mar 4, 2019 at 7:40

Tony Tom

1,5831 gold badge12 silver badges19 bronze badges

Collectives™ on Stack Overflow

Typescript / Vuejs not compiling for computed property

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related