Javascript 在Typescript中访问Vue数据对象

我刚从纯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>

从“axios”导入axios；
导出默认值{
名称：“索引”，
数据（）{
返回{
年份：数组，
bgs：阵列
}
},
方法：{
loadYears:function（）：void{
让自我=这个；
axios.get（'../letter/get/years'）。然后（函数（响应）{
功能年数（值：任意）{
自我。年。推动（价值）；
}
答复.数据['年]。每一年（年）；
});
},
loadBg:function（）：void{
让自我=这个；
获取（'../bg/get/all'）。然后（函数（响应）{
JSON.parse（response.data['bgs']）.forEach（函数（obj:any）{
自身背景推送（obj）；
})
});
}
},
beforeMount（）{
这个。loadYears（）；
这是loadBg（）；
}
}

现在切换到Typescript后，self.years.push（value）和self.bgs.push（obj）不再工作，相应的错误显示：“self.data.years.push不是函数”。

---

有趣的是，在beforeMount（）-函数中，我得到一个错误，说loadYears（）和loadBg没有定义，但是通过这个.data（）.years或bg访问data（）-对象在这个块中工作得非常好。如何在我的方法块中访问这些属性？

有两种方法可以

键入您的数据属性，如下所示：

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


从“Vue”导入Vue；
界面模型{
名称：string
年龄:数目
}
导出默认Vue.extend（{
数据（）{
常量foo:Model[]=[]；
返回{
福，
条形图：[]作为型号[]
};
},
挂载（）{
这个。foo。push({
姓名：“用户”，年龄：22
});
这个。酒吧。推({
姓名：“客人”，年龄：20岁
});
},
});
有两种方法可以
键入数据属性，如下所示：

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


从“Vue”导入Vue；
界面模型{
名称：string
年龄:数目
}
导出默认Vue.extend（{
数据（）{
常量foo:Model[]=[]；
返回{
福，
条形图：[]作为型号[]
};
},
挂载（）{
这个。foo。push({
姓名：“用户”，年龄：22
});
这个。酒吧。推({
姓名：“客人”，年龄：20岁
});
},
});
您能分享您的准确打字脚本代码吗。vue中的Typescript与vanilla JS有很大的不同，您基本上看到了所有内容，这是我的全标记nowUse组合API。您正在使用的语法不便于键入。看
bgs:Array
-这是一个错误，这不是TS类型，基本上是分配数组构造函数，这就是为什么push不是一个函数的原因。另请参见，它不是从js到tscan的1对1转换，您可以共享您的确切typescript代码。vue中的Typescript与vanilla JS有很大的不同，您基本上看到了所有内容，这是我的全标记nowUse组合API。您正在使用的语法不便于键入。看
bgs:Array
-这是一个错误，这不是TS类型，基本上是分配数组构造函数，这就是push不是函数的原因。另请参见，它不是从js到TS的1对1转换