使用mitt时报错

来源：5-10 ValidateForm 编码第三部分 - 寻找外援 mitt

linkscope

2020-09-27

import mitt from 'mitt'

export const emitter = mitt()

export default defineComponent({
  setup(props, context) {
    const callback = (text: string) => {
      console.log(text)
    }
    
    emitter.on('form-item-created', callback)
    
    onUnmounted(() => {
      emitter.off('form-item-created', callback)
    })
  }
})

TS2769: No overload matches this call.
  Overload 1 of 2, '(type: "*", handler: WildcardHandler): void', gave the following error.
    Argument of type '"form-item-created"' is not assignable to parameter of type '"*"'.
  Overload 2 of 2, '(type: string | symbol, handler: Handler<string>): void', gave the following error.
    Argument of type '(text: string) => void' is not assignable to parameter of type 'Handler<string>'.
      Types of parameters 'text' and 'event' are incompatible.
        Type 'string | undefined' is not assignable to type 'string'.
          Type 'undefined' is not assignable to type 'string'.
    28 |     }
    29 | 
  > 30 |     emitter.on('form-item-created', callback)
       |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    31 | 
    32 |     onUnmounted(() => {
    33 |       emitter.off('form-item-created', callback)

ERROR in src/components/Form/index.vue:33:7
TS2769: No overload matches this call.
  Overload 1 of 2, '(type: "*", handler: WildcardHandler): void', gave the following error.
    Argument of type '"form-item-created"' is not assignable to parameter of type '"*"'.
  Overload 2 of 2, '(type: string | symbol, handler: Handler<string>): void', gave the following error.
    Argument of type '(text: string) => void' is not assignable to parameter of type 'Handler<string>'.
    31 | 
    32 |     onUnmounted(() => {
  > 33 |       emitter.off('form-item-created', callback)
       |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    34 |     })
    35 |
    36 |     return {

看了很多网上的，没看到有效的解决方案，mitt也是2.1.0的

写回答

4回答

晨曦的希望

2020-09-27

已采纳

传递的参数text有可能为空（也就是没传的时候是undefined类型）

const callback = (text: string | undefined) => {
    console.log(text)
}

或者弄成可选参数也行

小丫么小饭团

carson__

666

2021-09-08

共8条回复

张轩

2020-09-27

楼下的同学说的很对，

mitt 的定义文件有所升级，打开 mitt 的定义文件可以看到，on 的定义

on<T = any>(type: EventType, handler: Handler<T>): void;

type Handler<T = any> = (event?: T) => void;

发现 Handler 这个类型中 event 参数是可选的。

我们不能把（text: string）=> void(你的类型) 赋值给 (event?: T) => void 类型

所以只要修改一下，改成

const callback = (text？: string) => {
console.log(text)
}

应该就可以啦

这个问题我们记录在常见问题文档中，欢迎大家查阅：https://shimo.im/docs/YT9cdpDcKKCWV3CX

雨花凉

好坑啊，没看懂ts的错误提示，在这节卡了好久。视频中是test

2020-10-19

共1条回复

漂泊猫

2021-01-26

import mitt, { Emitter, Handler } from "mitt";
export const emitter: Emitter = mitt();
...
const callback: Handler = (arg: string) => {
 // ...
};

采集交换

秀，有用

2021-02-07

共1条回复

weixin_慕圣5321928

2021-07-10

通过给mitt函数定义泛型可以解决报错

type Events = {  'form-item-created': string  value: string  }
export const emitter = mitt<Events>()
// 监听事件名换成对应创建类型Events中的key
// 监听子组件的响应事件    
emitter.on('form-item-created', emitCallback)    
onUnmounted(() => {      
  // 组件销毁时，解除监听子组件的响应事件      
  emitter.off('form-item-created'， emitCallback)    
})

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3070 学习 · 2249 问题

查看课程

相似问题

怎么这次在slot中又不用mitt了？。。。

回答 1

vuex和mitt

回答 1

关于 mitt 疑惑

回答 1

mitt报错

回答 1

关于mitt单例问题

回答 3

打开慕课网App查看更多内容