mitt版本2.1.0使用问题

Question

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<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,解决方法如下

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

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