Encountering errors when attempting to declare an array of objects in Vue.js 3 + TypeScript. The code snippet includes a template, script, and style sections.
<template>
<ul >
<li v-if="!items.length">...loading</li>
<li v-for="item in items" :key="item.id">
<slot name="item" v-bind="item"></slot>
</li>
</ul>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'child-slot-component',
data() {
return {
items: []
}
},
mounted() {
setTimeout(() => {
this.items = [
{ id: 1, body: 'Scoped Slots Guide', username: 'Evan You', likes: 20 },
{ id: 2, body: 'Vue Tutorial', username: 'Natalia Tepluhina', likes: 10 }
]
}, 1000)
},
})
</script>
<style scoped>
ul{
list-style-type: none;
}
</style>
Encountering error Type 'number' or 'string' is not assignable to type 'never'.ts(2322) because the property was declared as never when initializing the items array. Desiring to declare objects with specific properties such as {id:number, body:string,username:string, likes:number}[]
Inquiring about the correct way to handle this declaration using TypeScript.
Any insights on configuration adjustments that may be required would be appreciated. Thank you!
This is the content of my tsconfig.json file:
{
"compilerOptions": {
"target": "esnext",
...
}
Similarly, here are excerpts from my vue.config.js, babel.config, shims-vue.d.ts, and .eslintrc.js files.
The configurations provided above follow the standard setup generated by 'vue create app-name' command.