I've come across some code that seems to be functioning properly, but my IDE is flagging it with the following warnings:
TS2349: This expression is not callable. Type 'Emits' has no call signaturesBelow is the code snippet in question:
<script setup lang="ts">
import { ref } from 'vue'
export interface Props {
currentStep: number;
canLocal: boolean;
}
export interface Emits {
canLocal: boolean;
}
const emit = defineEmits<Emits>();
const props = defineProps<Props>();
const checkBoxes =ref({
canOnline: false
});
const emitCanOnline = (checked: boolean) => {
emit('canOnline',checked)
}
</script>
<template>
<n-checkbox
@update:checked="emitCanOnline"
v-model:checked="checkBoxes.canOnline" label="online services"/>
</template>
If I modify defineEmits<Emits>() to defineEmits(['canOnline']), the IDE warnings disappear. However, I prefer to stick to a TypeScript approach. How can I resolve this issue while maintaining TypeScript conventions?