javascript - Accediendo a objetos de datos de Vue en Typescript

Acabo de cambiar de JavaScript puro a Typescript (o al menos eso estoy intentando). Aquí está el código que funcionaba perfectamente antes, salvo la tipificación realizada hasta ahora:

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

ahora, después de cambiar a Typescript, self.years.push(value) y self.bgs.push(obj) ya no funcionan, el error correspondiente dice: "self.$data.years.push no es una función". Curiosamente, en la función beforeMount() obtengo un error que dice que loadYears() y loadBg no están definidos, pero acceder a los objetos de data() funciona perfectamente en este bloque a través de this.data().years o bgs. ¿Cómo puedo acceder a estas propiedades dentro de mi bloque de métodos?

Respuesta #1

tienes dos formas de escribir tus propiedades de datos como se muestra a continuación:

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