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

Answer 1

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.