Typescript не распознает значения проп в компоненте Vue

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.pathbase считается Typescript недействительным?Это не первый раз, когда я пытался получить доступ к опоре без $props, но это первый раз, когда Typescript жаловался на это.Кроме того, если я использую this.pathbase, Typescript жалуется в моем редакторе (VSCode), но Vue компилирует без ошибок проект, и компонент отображает и ведет себя соответствующим образом.

Сообщение на VSCode говорит: Property 'pathbase' does not exist on type 'Vue'.

Я хочу знать, почему это вызывает эту ошибку, потому что я хотел бы лучше понять машинопись.Зачем this.pathbase вызывать жалобы на машинопись, даже если это не ошибка компиляции?Почему я должен использовать $props?

Answer 1

Обычно вам не нужно использовать $props.Эта проблема аналогична известной проблеме Vue / TypeScript , когда вывод TypeScript для всех props теряется, когда prop имеет тип {}.Разница здесь в том, что у вас есть prop с типом Array (то есть data: Array), который вызывает ту же проблему, предотвращая доступ к this.pathbase.

Обходной путь должен объявить Array тип с as () => Foo[], где Foo - ожидаемый тип каждого data элемента:

props: {
  data: Array as () => String[],
  // ...
}

Answer 2

Реквизиты предназначены только для чтения, это означает, что ребенок не является владельцем этих конкретных данных и, следовательно, он не может ничего изменить в этих данных.Pathbase - это свойство ваших реквизитов, и чтобы получить доступ к свойству, вам нужно вызвать его реквизиты с помощью this.props.