Below is a Vue component I have created for a generic sidebar that can be used multiple times with different data:
<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>
My question pertains to the use of this.$props.pathbase as opposed to just this.pathbase. Why does Typescript consider this.pathbase as "invalid" when accessing the prop? Although my project compiles and functions correctly, TypeScript in VSCode raises an error message stating:
Property 'pathbase' does not exist on type 'Vue'.I am curious about this discrepancy and would like to gain a deeper understanding. Why does Typescript require the use of $props even if the code runs without issue? What is the reason behind its insistence on using $props? It's puzzling why this.pathbase triggers a Typescript complaint despite being manageable by Vue during compilation.