Question

我最近在我的vue项目中添加了打字稿，每次访问道具或数据中的值时都会出现此错误

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

这是我的道具

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

这是它正在使用的方法

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

什么可能导致此问题？

Answer 1

在 Vue 3 中，我通过将导出的组件字典包装在 defineComponent 中解决了这个问题。

Answer 2

在没有vue-class-component的情况下，很难在VueJS中使用打字稿。您是否使用Vue.extend()定义组件？

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

所有Vue道具和数据均给出错误'Property''在类型为TypeScript上不存在

2 个答案: