javascript - 在 Typescript 中访问 Vue 数据对象

Question

我刚刚从纯 JavaScript 切换到 Typescript(或者至少我正在尝试这样做)。这是之前完美运行的代码，减去到目前为止完成的输入:

<script lang="ts">
    import axios from 'axios';

    export default {
        name: "Index",
        data() {
            return {
                years: Array,
                bgs: Array
            }
        },
        methods: {
            loadYears: function (): void {
                let self = this;
                axios.get('../letter/get/years').then(function (response) {
                    function pushYears(value: any) {
                        self.years.push(value);

                    }

                    response.data['years'].forEach(pushYears);
                });
            },
            loadBg: function (): void {
                let self = this;
                axios.get('../bg/get/all').then(function (response) {
                    JSON.parse(response.data['bgs']).forEach(function (obj: any) {
                        self.bgs.push(obj);
                    })
                });
            }
        },
        beforeMount() {
            this.loadYears();
            this.loadBg();
        }
    }
</script>

现在切换到 Typescript 后，self.years.push(value) 和 self.bgs.push(obj) 不再工作，相应的错误显示:“self.$data.years.push 不是函数” 。 有趣的是，在 beforeMount() 函数中，我收到一条错误，指出 loadYears() 和 loadBg 未定义，但通过 this.data().years 或 bgs 在此 block 中访问 data() 对象可以完美地工作。如何在我的方法 block 中访问这些属性？

Answer 1

您有两种方法键入您的数据属性，如下所示:

<script lang="ts">
import Vue from 'vue';

interface Model {
  name: string
  age: number
}

export default Vue.extend({    
  data () {
    const foo: Model[] = [];
    return {
      foo,
      bar: [] as Model[]
    };
  },

  mounted () {
    this.foo.push({
      name: 'user', age: 22
    });
    this.bar.push({
      name: 'guest', age: 20
    });
  },
});
</script>