2014-01-17 2 views
3

Я только что начал с TypScript, но мне интересно, можно ли расширить JQueryEventObject с помощью нового метода - я хотел бы добавить метод отмены, который устанавливает событие для остановки пузыря и распространения.Возможно расширение JQueryEventObject в TypeScript

Если мое понимание верное, то нет способа сделать это с помощью TypeScript, потому что JQueryEventObject - это просто интерфейс, созданный для обеспечения intellisense того, что доступно для объекта события, предоставленного для события. Однако, возможно, я ошибаюсь, и если у кого-то есть решение, то я буду признателен, если кто-то поделится этим со мной.

ответ

1

Вы правы, что определение типов символов является интерфейсом, однако вы можете его расширить, и вы также можете расширить среду выполнения, чтобы добавить новую функцию. Есть две вещи, которые должны быть сделаны:

  1. делают машинопись известно о новой функции
  2. сделать новая функция доступна во время выполнения внутри 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.

(BTW, JQuery имеет stopPropagation() и stopImmediatePropagation(), которые могли бы сделать то, что вы хотите уже)

+0

Вам не нужно даже назвать интерфейс по-разному, придавая ему такое же имя будет автоматически продлить существующий интерфейс. – thomaux

+1

Благодарю вас обоих, я на самом деле закончил это, как предложил @Anzeo, без необходимости в ExtJQueryEventObject, и он отлично работает. Причина, по которой я хочу событие отмены, так это то, что мне не нужно продолжать писать preventDefault(), stopPropagation() и stopImmediatePropagation(), поскольку код, отменяющий отмену, вызывает все эти и устанавливает cancelBubble в true. – Anupheaus

Смежные вопросы