0
151
ViewsMissing return Type on Function in Vue 3 with Typescript
My code looks like this,
<template>
<div>
<ul v-if="list.length !== 0">
{{
list
}}
</ul>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => {
return []
},
},
},
}
</script>
Am I missing something, because I am getting error on this line:
I also tried solution from this page, but nothing works.
3 answers
Answer question0
This is not an error, but a warning that the anonymous function should indicate a return type. Your IDE shows the name of the check, and searching for it leads to a page with good examples.
The warning should be fixed like this:
list: {
type: Array,
default: ():Array => {
return []
},
},
0
As error said, you are missing function return type. You defined prop type, but not function return type.
It should look like this (in place of any you should also specify type):
export default {
props: {
list: {
type: Array,
default: () : Array<any> => {
return []
},
},
},
}
0
As a general hint I would suggest that if you are using Vue 3 + Typescript you should take advantage of the defineComponent function to wrap your component options object as documented here: https://v3.vuejs.org/guide/typescript-support.html#defining-vue-components. If you are using the recommended linting settings (and your IDE is working correctly) the problem should be solved