不能在 jQuery 和 TypeScript 中使用 $('.foo').on('click', '.bar'答案

【问题标题】：Can't use $('.foo').on('click', '.bar', with jQuery and TypeScript不能在 jQuery 和 TypeScript 中使用 $('.foo').on('click', '.bar'
【发布时间】：2017-10-31 23:12:35
【问题描述】：

我在一个项目中使用TypeScript和jQuery，我需要使用jQuery的on来监听一个事件：

const $previewListWrp: jQuery<HTMLElement> = $('.js-preview-list-wrp').first();

$previewListWrp.on('click', '.btn-action.remove', (evt: Event): void => {
  let $box: JQuery<HTMLElement> = $(evt.target).closest('.js-preview-wrp');
  console.log($box.data());
});

但是，我得到了错误

“点击”类型的参数不能分配给“PlainObject void”类型的参数> |事件处理程序库

刚开始一个新项目，安装了最新版本的 TypeScript、jQuery 和 @types/jQuery。

【问题讨论】：

标签： jquery typescript events

【解决方案1】：

尝试将 evt: EventTarget 更改为 evt: JQuery.Event

【讨论】：

谢谢，它有效。不过，还需要详细说明吗？
Event 表示 DOM 事件对象。然而，jQuery 传递了一个JQuery.Event 类型的对象。这些类型不兼容。将evt 声明为Event 会导致函数类型不匹配任何重载并产生错误。在这种情况下，我建议不要显式声明 evt 的类型，并允许从声明中推断出来。

【解决方案2】：

您可以使用on 方法的替代签名，其中第一个参数确实是一个对象，然后执行以下操作：

$previewListWrp.on({
    'click': (evt: EventTarget): void => {
        console.log(evt);
    }
}, '.btn-action.remove');

【讨论】：

现在我收到此错误：[ts] Argument of type '{ 'click': (evt: EventTarget) => void; }' is not assignable to parameter of type 'PlainObject<false | EventHandler<HTMLElement, string> | EventHandlerBase<any, Event<HTMLElement, ...' 以及其他一些我无法发布的内容，因为它不会在评论中出现。 `
致编辑我原始问题的人，谢谢。但是，对于JQuery<HTMLElement>，类型确实是JQuery（带有大写“j”）。如果不是，那么我对事情的理解甚至比我想承认的还要少。
@Shiladitya，请注意费尔南多刚才所说的话。费尔南多，您可以通过再次编辑您的问题来恢复它。
看起来像编写回调处理函数没有为evt定义类型有效，即(evt) => { ... }而不是(evt: EventTarget) => { ... } .类型定义明确指出evt 是扩展EventTarget 的类型。