Typescript/Vuejs没有编译计算属性

Question

我开始学习打字稿和Vuejs.

任何人都可以解释我为什么我不能从计算的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;
        }
    }
})

我有这个错误

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

看起来您需要注释返回类型,因为TypeScript很难推断某些方法的类型.

而不是

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

试试这个

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

Answer 2

在您的allChecked方法中this，关键字不是引用您传递给Vue构造函数的选项对象，而是引用类本身的实例Vue。

您将需要创建一个类，该类扩展Vue了您希望添加到原始类中的属性：

import * as Vue from "vue";

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

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

如果您需要有关将 Vue.js 与 Typescript 结合使用的更多信息，请查看此页面： https: //v2.vuejs.org/v2/guide/typescript.html