title: Converting a jQuery plugin to TypeScript
body: <p>Ok so first off here is my very basic jQuery plugin</p>
  
  <pre><code>(function ($){
      $.fn.greenify = function (options) {
          var settings = $.extend({
              // These are the defaults
              color: '#556b2f',
              backgroundColor: 'white'
          }, options);
  }(jQuery));
  
  $('a').greenify({
      color: 'orange'
  }).showLinkLocation();
  </code></pre>
  
  <p>Basically all this does is change the text color and background-color with the provided element. Now what I am trying to do is convert this simple plugin into TypeScript</p>
  
  <p>I have tried a few things and the closest I got is this.</p>
  
  <p>TypeScript</p>
  
  <pre><code>/// &lt;reference path="../../typings/jquery/jquery.d.ts" /&gt;
  
  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);
          }
      }
  }
  </code></pre>
  
  <p>JQuery which calls it</p>
  
  <pre><code>$(function ()
  {
      var options: Coloring.GreenifyOptions = new Coloring.GreenifyOptions('#0F0', '#000');
  
      var $elems = $('a');
      $elems.each(function()
      {
          var result = new Coloring.Greenify($(this), options)
      });
  });
  </code></pre>
  
  <p>However I don't want to provide the element like the above <code>new Coloring.Greenify($(this), options)</code>, I basically want to do something like this</p>
  
  <pre><code>$('a').Coloring.Greenify(options);
  </code></pre>
  
  <p>or</p>
  
  <pre><code>$('a').Coloring.Greenify(Coloring.GreenifyOptions()
  {
      color: '#F0F',
      backgroundColor: '#FFF'
  });
  </code></pre>
  
  <p>But I can't seem to figure how to tell TypeScript that the element it is attached to already is the <code>Jquery</code> element. Could anyone shine some light on this to help me out.</p>
  
  <p>P.S. the above I have works fine, I just want to change the calling code.</p>
  
  <hr>
  
  <p>Update</p>
  
  <p>This is what I have at the moment and it works</p>
  
  <p>TypeScript</p>
  
  <pre><code>interface JQuery
  {
      Greenify();
      Greenify(options: Coloring.GreenifyOptions);
  }
  
  (function ($)
  {
      $.fn.Greenify = function (options)
      {
          return new Coloring.Greenify(this, options);
      }
  })(jQuery);
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>var $elems = $('a').Greenify(options);
  </code></pre>
  
  <p>However it means I have to provide options and if I do the constructor without options I get options is undefined. The answer I have ticked as correct is correct for the question I have asked. However just keep in mind that the answer provided required you provide options into your typescript constructor, I am going to see on how to have default options and then override them in the constructor but this is a different question :)</p>
  
  <hr>
  
  <p>Update 2</p>
  
  <p>Just to let everyone know I have found a way to provide options to your plugin or not.</p>
  
  <p>What you can do is this</p>
  
  <p>TypeScript class</p>
  
  <pre><code>export class Greenify
      {
          // Default Options
          static defaultOptions: IGreenifyOptions =
          {
              color: '#F00',
              backgroundColor: '#00F'
          };
  
          // Fields
          element: JQuery;
          options: GreenifyOptions;
  
          constructor(element: JQuery, options: GreenifyOptions)
          {
              // Merge options
              var mergedOptions: GreenifyOptions = $.extend(Greenify.defaultOptions, options);
              this.options = mergedOptions;
              this.element = element;
  
              this.OnCreate();
          }
  
          OnCreate()
          {
              this.element.css('color', this.options.color).css('background-color', this.options.backgroundColor);
          }
  
      }
  </code></pre>
  
  <p>TypeScript Interface</p>
  
  <pre><code>interface JQuery
  {
      Greenofy();
      Greenify(obj?: any);
      Greenify(options?: Coloring.GreenifyOptions);
  }
  
  (function ($)
  {
      $.fn.Greenify = function (options)
      {
          return new Coloring.Greenify(this, options);
      }
  })(jQuery);
  </code></pre>
  
  <p>jQuery code to call the plugin with one optional option</p>
  
  <pre><code>$(function ()
  {
      var $elems = $('a').Greenify(&lt;Coloring.GreenifyOptions&gt;{
          color: '#00F'
      });
  });
  </code></pre>
  
  <p>So not the output will make the anchors background color '#00F' which is the default and the option I have provided will make the anchor text color '#00F'.</p>
  
  <p>I hope this helps anyone else that is having the same problem as me :)</p>