mitt版本2.1.0使用问题

Question

<script lang="ts">
import { defineComponent, onUnmounted } from 'vue'
import mitt from 'mitt'
type ValidateFunc = () => boolean
export const emitter = mitt()
export default defineComponent({
emits: ['form-submit'],
setup(props, context) {
let funcArr: ValidateFunc[] = []
const submitForm = () => {
const result = funcArr.map(func => func()).every(result => result)
context.emit('form-submit', result)
}
const callback = (func?: ValidateFunc) => {
if (func) {
funcArr.push(func)
}
}
emitter.on('form-item-created', callback)
onUnmounted(() => {
emitter.off('form-item-created', callback)
funcArr = []
})
return {
submitForm
}
}
})
</script>



问题：报错
没有与此调用匹配的重载。
  第 1 个重载(共 2 个)，“(type: "*", handler: WildcardHandler<Record<EventType, unknown>>): void”，出现以下错误。
  第 2 个重载(共 2 个)，“(type: "form-item-created", handler: Handler<unknown>): void”，出现以下错误。ts(2769)
(method) Emitter<Record<EventType, unknown>>.on(type: "*", handler: WildcardHandler<Record<EventType, unknown>>): void (+1 overload)

Answer 1

提问者 不染的卡卡 2023-12-04 20:55:39

 已经解决

版本是3.0.1,解决方法如下

<script lang="ts">
import { defineComponent, onUnmounted } from 'vue'
// 现在mitt要求每个事件名称和事件类型要一一对应
import mitt from 'mitt'
type ValidateFunc = () => boolean
type Events = { 'form-item-created': ValidateFunc }// 定义一个Event类型  这个对应是让事件和对应的callback 一一对应
export const emitter = mitt<Events>()// 实例化 mitt 的时候，作为泛型传递进去
export default defineComponent({
emits: ['form-submit'],
setup(props, context) {
let funcArr: ValidateFunc[] = []
const submitForm = () => {
const result = funcArr.map(func => func()).every(result => result)
context.emit('form-submit', result)
}
const callback = (func?: ValidateFunc) => {
if (func) {
funcArr.push(func)
}
}
emitter.on('form-item-created', callback)
onUnmounted(() => {
emitter.off('form-item-created', callback)
funcArr = []
})
return {
submitForm
}
}
})
</script>

<style scoped></style>