如何修复类型 'Emits' 在 vue 3 中使用脚本设置和打字稿没有调用签名？

Question

我有以下代码可以正常工作，但我在 IDE 中收到以下警告：

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

代码如下：

<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>

如果我将 defineEmits<Emits>() 更改为 defineEmits(['canOnline']) IDE 警告将消失，但我想以 TypeScript 的方式进行并坚持 TypeScript ，如何解决这个问题？

Answer 1

提供给 defineEmits 的类型参数声明了结果 emit() 调用允许的函数签名。

由于您希望能够以 "canOnline" 作为第一个参数并使用布尔值作为第二个参数来调用 emit()，因此 Emits 接口应声明为：

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

如何修复类型 'Emits' 在 vue 3 中使用脚本设置和打字稿没有调用签名？

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

typescript

vue.js

vuejs3

vue-composition-api