Typescript/Vuejs kompiliert nicht für berechnete Eigenschaft

Question

Ich fange an, Typoskript & Vuejs zu lernen.

Kann mir jemand erklären, warum ich nicht auf die Kontoeigenschaft in Daten von der berechneten allChecked() zugreifen kann?

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

Ich habe diese Fehler

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

Statt

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

Versuchen:

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

Answer 2

In Ihrem allChecked Methode der this Schlüsselwort nicht referenziert die Option Objekt übergeben Sie den Vue Konstruktor, aber die Instanz der Vue Klasse selbst.

Sie müssen eine Klasse erstellen, die Vue mit den Eigenschaften, die Sie in die ursprüngliche Klasse hinzufügen möchten erweitert:

import * as Vue from "vue"; 

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

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

Wenn Sie mehr Informationen zu müssen mit Vue.js mit Typoskript Diese Seite finden Sie unter: https://vuejs.org/v2/guide/typescript.html

Answer 3

Anscheinend müssen Sie die Rückgabetypen mit Anmerkungen versehen, da TypeScript Schwierigkeiten hat, die Typen bestimmter Methoden zu ermitteln.

so statt

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

versuchen diese

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