具有嵌套功能的现有jQuery插件的Typescript定义

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?

Answer 1

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