使用mitt时报错

Question

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的

Answer 1

晨曦的希望 2020-09-27 15:16:34

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

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

或者弄成可选参数也行

• 提问者 linkscope #1

  非常感谢！但视频教材中为何无需此操作，迷茫了。。。

• 晨曦的希望 回复 提问者 linkscope #2

  可能老师的配置不一样吧

• 张轩 回复 提问者 linkscope #3

  有可能是录视频的时候 mitt 定义文件和现在的不一样，它有所更新

点开查看后面5条评论

Answer 2

张轩 2020-09-27 17:13:23

楼下的同学说的很对，

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

• 雨花凉 #1

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

Answer 3

漂泊猫 2021-01-26 19:15:47

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

• 采集交换 #1

  秀，有用

Answer 4

weixin_慕圣5321928 2021-07-10 22:20:42

通过给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)    
})