When using VS Code with Typescript, I encounter errors stating that the item is of type unknown. However, it still renders correctly with no errors or warnings in the console. How can I resolve these errors?
<script setup lang="ts">
import NavLink from '@/Components/NavLink.vue';
import { PropType } from 'vue'
interface Item {
href: String,
active: Boolean,
text: String
}
const props = defineProps({
items : {
type: Object as PropType<Item[]>,
required: true
}
});
</script>
<template>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="{{route('dashboard')}}">Page title</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<NavLink v-for="(item, key, index) in items" :href="item.href" :active="item.active" :key="index">
{{item.text }}
</NavLink>
</ul>
</div>
</div>
</nav>
</template>
Errors:
- Property 'href' does not exist on type 'unknown'.
- Property 'active' does not exist on type 'unknown'.
- Property 'text' does not exist on type 'unknown'.