vue.js - Alle vue-props og data gir feilen 'Egenskap '' finnes ikke på typen '' med TypeScript

Jeg la nylig til TypeScript i Vue-prosjektet mitt, og hver gang jeg får tilgang til en verdi i props eller data, får jeg denne feilen

37:46 Property 'activity' does not exist on type '{ props: { activity: { type: ObjectConstructor; required: boolean; }; }; methods: { formatDistance: (distance: number, setting_unit: string) => string; }; mounted: () => void; }'.
    35 |         },
    36 |         mounted: function () {
  > 37 |             var activitymap = L.map('map' + this.activity['activity']['id']).setView([51.505, -0.09], 13)
       |                                              ^

Dette er mine rekvisitter

    props: {
        activity: {
            type: Object,
            required: true
        }
    },

og dette er metoden den brukes i

    mounted: function () {
        var activitymap = L.map('map' + this.activity['activity']['id']).setView([51.505, -0.09], 13)
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: '<a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: process.env.VUE_APP_MAPBOX_KEY
        }).addTo(activitymap)

        var gpxGroup = new L.FeatureGroup();

        activitymap.addLayer(gpxGroup);

        omnivore.gpx(this.activity['activity']['activity_log_url']).addTo(gpxGroup).on('ready',
            function () {
                activitymap.fitBounds(gpxGroup.getBounds());
            }
        )
    }

Hva kan forårsake dette problemet?

Svar #1

Det er vanskelig å bruke TypeScript med VueJS uten vue-class-component. Bruker du Vue.extend() for å definere komponenten din?

import Vue from 'vue';
export default Vue.extend({
    props: {
        activity: {
            type: Object,
            required: true
        }
    },
});

Svar #2

I Vue 3 løste jeg dette problemet ved å pakke den eksporterte komponentordlisten inn i defineComponent.

https://v3.vuejs.org/guide/typescript-support.html#defining-vue-components

import Vue from 'vue';

export default Vue.defineComponent({
    data() { ... },
    methods: { ... },
    ...
});

Relaterte artikler