Question

我开始学习打字稿＆amp; 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://vuejs.org/v2/guide/typescript.html

Answer 3

这是一篇很好的文章带有Typescript的VuejS

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>

Answer 4

而不是

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

尝试：

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

Typescript / Vuejs没有编译计算属性

4 个答案: