When using Vue3's defineComponent function, it requires the first generic parameter to be Props. To provide props type using Typescript interface, you can do it like this:
export default defineComponent<{ initial?: number }>({
setup(props) {
const count = ref(props.initial ?? 0);
const increase = () => count.value++;
const decrease = () => count.value--;
return { count, increase, decrease };
}
});
However, sometimes Vue may not recognize your props, resulting in code like this not working:
<Counter :initial="5"></Counter>
To solve this issue, you can specify props options in your component definition like so:
export default defineComponent<{ initial?: number }>({
props: {
initial: { type: Number, required: false },
},
setup(props) {
const count = ref(props.initial ?? 0);
const increase = () => count.value++;
const decrease = () => count.value--;
return { count, increase, decrease };
}
});
However, this might lead to a type error
TS2769: No overload matches this call.If anyone knows how to address this issue, please share your solution.