Typescript with jQuery UI Widgets - Implementing call signatures

Question

I have many dialogs throughout my website (Login dialog, Register dialog, Contact dialog, etc) that I am trying to model using Typescript.

the jquery-ui d.ts file defines a Dialog interface as such:

interface Dialog extends Widget, DialogOptions, DialogEvents{  }

Everything in DialogOptions and DialogEvents is optional so no problems there, but the Widget interface defines some call signatures that I am not understanding:

interface Widget {
    (methodName: string): JQuery;
    (options: WidgetOptions): JQuery;
    (options: AccordionOptions): JQuery;
    (optionLiteral: string, optionName: string): any;
    (optionLiteral: string, options: WidgetOptions): any;
    (optionLiteral: string, optionName: string, optionValue: any): JQuery;

    (name: string, prototype: any): JQuery;
    (name: string, base: Function, prototype: any): JQuery;
}

When I try to implement this interface in a class:

class LoginDialog implements Dialog { 

}

The compiler complains:

Class 'LoginDialog' declares interface 'Dialog' but does not implement it: Type 'Dialog' requires a call signature, but Type 'LoginDialog' lacks one.

I don't understand how to implement these "call signatures" or what they should do, in fact, I don't even understand what a call signature is.

EDIT:

I found one type of valid use case for a call signature is for call back typing:

interface ICallback{
    (param: string) : void;
}

function someMethod(callback: ICallback){
    callback('a string'); //Good
    callback(5);         //Bad 
}

However, the question still stands as I could not find a use case for multiple call signatures and still don't understand how to implement the jquery-ui.d.ts Dialog interface

Fenton · Accepted Answer · 2013-01-14 09:37:32Z

5

If you are using jQuery UI, you don't need to implement any of these interfaces as they are already implemented in jQuery UI. These interfaces simply give you type information to use to call the existing jQuery UI functions with static typing.

$( "#dialog" ).dialog();

Without the jquery-ui.d.ts the type system wouldn't know about the dialog() function, for example.

answered Jan 14, 2013 at 9:37

Fenton

253k74 gold badges404 silver badges414 bronze badges

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

3 Comments

parliament Over a year ago

Well yes that's how I currently use dialogs, no problem there. But I was hoping to accomplish a more object oriented approach to managing the many dialogs on my site which differ only slightly. I don't have the code in front of me right now but I will look into this more later when I do.

Fenton Over a year ago

In that case I would hide the entire jQuery implementation behind your own IDialog interface, so your own interface is simpler.

parliament Over a year ago

Okay, that makes sense, question answered. Thanks

Collectives™ on Stack Overflow

Typescript with jQuery UI Widgets - Implementing call signatures

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related