All vue props and data give the error 'Property ' ' does not exist on type ' with typescript

Question

I recently added typescript to my vue project and every time I access a value in props or data I get this error

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

This is my props

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

and this is the method it is being used in

    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());
            }
        )
    }

What could be causing this issue?

Answer 1

It's hard to use typescript with VueJS without vue-class-component. Do you use Vue.extend() to define your component?

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

Answer 2

In Vue 3 I solved this problem by wrapping the exported component dictionary in defineComponent.

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

import Vue from 'vue';

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