Converting a jQuery plugin to TypeScript

Question

Ok so first off here is my very basic jQuery plugin

(function ($){
    $.fn.greenify = function (options) {
        var settings = $.extend({
            // Thes         


        

Answer 1

You can create and reference your own definitions file greenify.d.ts and add the function like this:

interface Jquery {
     greenify: (options: Coloring.IGreenifyOptions) => void
}

Then you can simple call it like:

$('a').greenify(new GreenifyOptions(...));

or

$('a').greenify({color:'', backgroundColor:''});

Explanation:

At compile time typescript will actually merge all interface definitions.

Side Note:

if you're adamant about having it exactly as $('a').Coloring.Greenify(..) then you'll have to change a lot more:

• Coloring couldnt be your module's name anymore as you'd have to use it in the interface definition above
• You would probably have to create a class that has .Greenify as static method
• Possibly more...

All in all it's probably easier to stick with my initial solution as it its a bit less verbose but that's up to you.

Hope that helps

Update:

To account for the default options you can modify the interface definition to have overrides:

interface Jquery {
     greenify: () => void;
     greenify: (options: Coloring.IGreenifyOptions) => void;
}

interface IGreenifyOptions
{
    color?: string;
    backgroundColor?: string;
}