Typescript 无法识别 Vue 组件上的 prop 值

Question

我有以下 Vue 组件。它的目的是构建一个通用的侧边栏，用不同的数据使用两到三次

<template>
    <div>
        <h5>{{ title }}</h5>
        <div v-for="prop of data" :key="prop.id">
            <router-link :to="path(prop.id)">{{ prop.name }}
            <i class="material-icons right">edit</i></router-link>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
    props: {
        data: Array,
        title: String,
        pathbase: String
    },
    methods: {
        path(id): string {
            return `${this.$props.pathbase}/${id}`;
        }
    }
});
</script>

我的问题是这个。为什么我必须使用this.$props.pathbase来访问pathbase这里的值？为什么this.pathbaseTypescript 认为“无效”？这不是我第一次尝试访问没有的道具，$props但这是 Typescript 第一次抱怨它。此外，如果我使用this.pathbase，Typescript 在我的编辑器 (VSCode) 中抱怨，但 Vue 编译项目时不会出错，并且组件显示和行为适当。

VSCode 上的消息说： Property 'pathbase' does not exist on type 'Vue'.

我想知道为什么会导致这个错误，因为我想更好地理解打字稿。this.pathbase即使不是编译错误，为什么也会导致打字稿抱怨？为什么我需要使用$props？

Answer 1

通常，您不需要使用$props. 该问题类似于已知的 Vue/TypeScript 问题，其中props当 aprop具有 type时，所有的 TypeScript 推理都会丢失{}。这里的区别在于您有一个propwith 类型Array（即data: Array），它导致了同样的问题，阻止访问this.pathbase.

解决方法是Array使用as () => Foo[]（或as PropType<Foo[]>对于版本 2.6 或更高版本）声明类型，其中Foo是每个data项目的预期类型：

import Vue from 'vue'

export default new Vue.extend({
  props: {
    data: Array as () => string[],
  }
})

或者：

// PropType added in version 2.6
import Vue, { PropType } from 'vue'

export default new Vue.extend({
  props: {
    data: Array as PropType<string[]>,
  }
})

更新 这已在 Vue 2.6.0中修复。