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;
}

Answer 2

Creating jQuery plugins along with TypeScript can get a bit messy. I personally prefer keeping the jQuery plugin chaining syntax, mostly for consistency and maintainability .

So, after the module declaration you can basically wrap around your implementation extending the jQuery prototype as:

module Coloring {
  interface IGreenifyOptions {
    color: string;
    backgroundColor: string;
  }

  export class GreenifyOptions implements IGreenifyOptions {
    // Fields
    color: string;
    backgroundColor: string;

    constructor(color: string, backgroundColor: string) {
      this.color = color;
      this.backgroundColor = backgroundColor;
    }
  }

  export class Greenify {
    // Fields
    element: JQuery;
    options: GreenifyOptions;

    constructor(element: JQuery, options: GreenifyOptions) {
      this.element = element;
      this.options = options;

      this.OnCreate();
    }

    OnCreate() {
      this.element.css('color', this.options.color).css('background-color', this.options.backgroundColor);
    }
  }
}


//jquery plugin wrapper.
;
(function(w, $) {
    //no jQuery around
  if (!$) return false;

  $.fn.extend({
    Coloring: function(opts) {
      //defaults
      var defaults: Coloring.GreenifyOptions = new Coloring.GreenifyOptions('#0F0', '#000');

      //extend the defaults!
      var opts = $.extend({}, defaults, opts)

      return this.each(function() {
        var o = opts;
        var obj = $(this);
        new Coloring.Greenify(obj, o);

      });
    }
  });
})(window, jQuery);

Fetching the plugin as:

$(function() {

  var $a = $('a').Coloring();
  var $div = $('div').Coloring({
    color: '#F0F',
    backgroundColor: '#FFF'
  });
  var $div = $('strong').Coloring({
    color: '#gold',
    backgroundColor: 'pink'
  });
});

Demo