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: stackoverflow.com/questions/13897659/… You will need to find out what interface you need to add your databind function to. — David Sherret
– David Sherret, Commented Jan 23, 2014 at 20:54

basarat · Accepted Answer · 2014-01-23 22:08:19Z

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, 2014 at 22:08

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ciel Over a year ago

Unfortunately this throws a 'duplicate identifier' exception. I'm not entirely certain why. Window is declared as a class, not an interface.

Collectives™ on Stack Overflow

Typescript - Adding a function to a defined type

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related