형식 설명에서 Vue 구성 요소의 프로펠러 값을 인식하지 못함

형식 설명에서 Vue 구성 요소의 프로펠러 값을 인식하지 못함

나는 다음과 같은 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.pathbaseTypecript에 의해 "유효하지 않은" 것으로 간주되는가?무턱대고 소품 출입을 시도한 것은 이번이 처음이 아니다.$props타이펙트가 이것에 대해 불평한 것은 이번이 처음이다.게다가 만약 내가 사용한다면this.pathbase, Typecript는 내 편집기(VSCode)에서 불평하지만 Vue는 오류 없이 프로젝트를 컴파일하고 구성 요소가 적절하게 표시되고 동작한다.

VSCode의 메시지는 다음과 같다.Property 'pathbase' does not exist on type 'Vue'.

나는 이 오류가 왜 발생하는지 알고 싶다. 왜냐하면 나는 서식을 더 잘 이해하고 싶기 때문이다.왜 그럴까?this.pathbase편찬 오류가 아니라도 형식에 불만을 제기하고 있는가?사용해야 하는 이유$props?

보통은, 당신은 사용할 필요가 없다.$props. 이 문제는 알려진 Vue/TypeScript 문제와 유사하며, 여기에서 TypeScript 추론 모두props~할 때 길을 잃다prop활자를 가지고 있다.{}여기서의 차이점은 당신은prop활자로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[],
  }
})

OR:

// 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에서 수정되었다.

소품은 읽기 전용이며, 이는 어린이가 특정 데이터의 소유자가 아니므로 해당 데이터의 어떤 것도 변경할 수 없다는 것을 의미한다.Pathbase는 당신의 소품에 있는 재산이며, 당신이 당신의 소품들을 'the.props'라고 부르는 것에 필요한 재산에 접근하기 위해서입니다.

참조URL: https://stackoverflow.com/questions/54391162/typescript-wont-recognize-prop-values-on-vue-component