Typescript - Adding a function to a defined type

Question

I am in the process of translating some of my code over, and I have noticed a peculiar behavior with the typing enforcement. I am not sure it is 'peculiar', it may very well be expected, but I am curious as to how to get around it.

For this example, I am using Kendo UI's kendoWindow widget, but almost any 'type' from any kind of library is sufficient to demonstrate it.

export function UserWindow(options) {
   var settings = $.extend({
     // default settings
   }, options);

   var $WINDOW = <kendo.ui.Window> {};

   $WINDOW = $("<div id='kendo-editor-window' />")
       .kendoWindow(settings) // this is where we have now declared the type, basically
       .data("kendoWindow");

   // here, I want to add my own little method to kendoWindow for the purpose of how
   // I intend to use it!
   $WINDOW.databind = function(e) {  // this is where we run into trouble!
       // some code goes here
   }

   return $WINDOW;
}

Now under normal Javascript, this does not give me any trouble. But .databind(e) is not a defined function of kendoWindow, and therefore it is actually balking at me adding it like this.

I have been able to get around it by not declaring the variable as a type of kendo.ui.Window, but I would like to discover how to APPROPRIATELY handle this situation, in other words, extend the type properly so that I get intellisense and the whole type safety thing if it is at all possible.

The same applies in your case as with this: http://stackoverflow.com/questions/13897659/extending-functionality-in-typescript You will need to find out what interface you need to add your `databind` function to. — David Sherret, Jan 23 '14 at 20:54

score 1 · Accepted Answer · answered Jan 23 '14 at 22:08

1

Basic type checking should (and will) prevent you from assigning to a non existent variable (databind in your case). So you need to tell typescript that such a function exists before you can assign it. Its easily done since interfaces are open ended in TypeScript, so add the following code :

module kendo.ui{
    export interface Window{
        databind: Function;
    }
}

answered Jan 23 '14 at 22:08

basarat

261,912
58
460
511

Unfortunately this throws a 'duplicate identifier' exception. I'm not entirely certain why. `Window` is declared as a class, not an interface. – Ciel Jan 23 '14 at 22:34

Typescript - Adding a function to a defined type

1 Answers1