How to Fix Type 'Emits' has no call signatures, in vue 3 using script setup and typescript?

Question

I have below code which is working fine but I'm getting below warnings in IDE :

TS2349: This expression is not callable.   Type 'Emits' has no call signatures

Here's the code :

<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 change defineEmits<Emits>() to defineEmits(['canOnline']) IDE warnings will be disappear but I want to do it in TypeScript way and stick to TypeScript , How to fix this?

Answer 1

The type argument given to defineEmits declares the allowed function signatures for the resulting emit() call.

Since you want to be able to call emit() with "canOnline" as the first argument, and a boolean as the second argument, the Emits interface should be declared as:

export interface Emits {
  (e: 'canOnline', value: boolean): void;
}