Typescript definition for existing jQuery plugin with nested function

Question

I am converting a large JS file that has a lot of jQuery plugins to use TypeScript so I need to also create the necessary TS definition files. I have run into a plugin that I can't figure out the definition file for.

Example of the plugin:

(function ($) {

$.fn.foo = function (options) {
    var settings = $.extend({
        one: false,
        two: true
    }, options);

    //do something
};

$.fn.foo.bar = function (input) {

    return input;
};
})(jQuery);

Example of the usage:

$('#list').foo({
one: true});

var updatedHtml = $('#label').foo.bar("hello world");

TypeScript defintion (so far):

 interface JQuery {
 foo(options: any) : JQuery;
}

Based on what I have so far, the first use case is covered, but not the second. How do I write the definition file so that it covers both use cases?

Community · Accepted Answer · 2017-05-23 12:33:10Z

3

You can use an anonymous interface (or whatever it is officially called) to define a function and its static fields together:

interface JQuery {
    foo: {
        (options: any): JQuery;
        bar: <T>(input: T) => T
    }
}

Playground

See also: Implementing TypeScript interface with bare function signature plus other fields

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Jun 8, 2015 at 15:11

billc.cn

7,3443 gold badges43 silver badges82 bronze badges

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

Collectives™ on Stack Overflow

Typescript definition for existing jQuery plugin with nested function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related