可以在 TypeScript 中扩展 JQueryEventObject答案

【问题标题】：Possible to extend JQueryEventObject in TypeScript可以在 TypeScript 中扩展 JQueryEventObject
【发布时间】：2014-02-06 20:44:50
【问题描述】：

我才刚刚开始使用 Typescript，但我想知道是否可以使用新方法扩展 JQueryEventObject - 我想添加一个取消方法，将事件设置为停止冒泡和传播。

如果我的理解是正确的，那么使用 TypeScript 就无法做到这一点，因为 JQueryEventObject 只是一个创建接口，用于提供对提供给事件的事件对象上可用内容的智能感知。但是，我可能是错的，如果有人有解决方案，那么我会很感激有人与我分享。

【问题讨论】：

标签： javascript typescript jquery

【解决方案1】：

打字稿定义是一个接口是正确的，但是，您可以扩展它，也可以扩展运行时以添加新功能。有两件事需要做：

让 typescript 了解新功能
让新函数在运行时在 jQuery 中可用

这是一个兼具两者的代码示例：

// PatchJquery.ts
// Include the generated .js file for this, after jQuery, in some html file.

/// <reference path="typedef/jquery/jquery.d.ts" />

// Runtime patch: Assume jQuery is already defined in the global scope 
// and patch its Event prototype.
jQuery.Event.prototype.cancel = function() {
    console.log("Someone wants me to cancel this event!",this);
}

// Define the extended typescript interface
interface ExtJQueryEventObject extends JQueryEventObject {
    cancel():void;
}

// Test
$(function() {
    var body:JQuery = $("body");
    body.on('click', (e:ExtJQueryEventObject) => {
        e.cancel();
    });
});

请注意，如果您想要一个实际的单击事件，则需要为 JQueryMouseEventObject 定义一个扩展接口。您需要对所有不同的 JQuery 事件类型执行此操作。或者，您可以只修改 jquery.d.ts 以将新函数添加到 BaseJQueryEventObject。

（顺便说一句，jQuery 有 stopPropagation() 和 stopImmediatePropagation()，这可能已经完成了你想要的操作）

【讨论】：

您甚至不需要为接口命名不同，给它相同的名称将自动扩展现有接口。
谢谢你们，实际上我最终按照@Anzeo 的建议做了，不需要 ExtJQueryEventObject 并且工作正常。我想要一个取消事件的原因是我不必继续编写 preventDefault()、stopPropagation() 和 stopImmediatePropagation()，因为取消背后的代码调用所有这些并将 cancelBubble 设置为 true。