Konvertieren ein jQuery-plugin, um Typoskript

Ok also erstmal off hier ist meine sehr einfache jQuery-plugin,

(function ($){
    $.fn.greenify = function (options) {
        var settings = $.extend({
            //These are the defaults
            color: '#556b2f',
            backgroundColor: 'white'
        }, options);
}(jQuery));

$('a').greenify({
    color: 'orange'
}).showLinkLocation();

Grundsätzlich all dies tut, ist zu ändern Sie die text-Farbe und hintergrund-Farbe mit der angegebenen Elements. Nun, was ich versuche zu tun ist, konvertieren Sie diese einfache plugin in Maschinenschrift

Habe ich versucht, ein paar Dinge und der nächste, den ich bekam ist dies.

Typoskript

///<reference path="../../typings/jquery/jquery.d.ts" />

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, welche Anrufe es

$(function ()
{
    var options: Coloring.GreenifyOptions = new Coloring.GreenifyOptions('#0F0', '#000');

    var $elems = $('a');
    $elems.each(function()
    {
        var result = new Coloring.Greenify($(this), options)
    });
});

Aber ich will nicht zu geben das element, wie oben new Coloring.Greenify($(this), options) ich wollen im Grunde, so etwas zu tun

$('a').Coloring.Greenify(options);

oder

$('a').Coloring.Greenify(Coloring.GreenifyOptions()
{
    color: '#F0F',
    backgroundColor: '#FFF'
});

Aber ich kann nicht scheinen, um Abbildung, wie Sie sagen, Typoskript, dass das element, an das es befestigt ist, ist bereits der Jquery element. Könnte jemand glänzen etwas Licht in diese, um mir zu helfen.

P. S. das habe ich oben funktioniert einwandfrei, ich möchte nur zum ändern der aufrufende code.

---

Update

Dies ist, was ich im moment und es funktioniert

Typoskript
interface JQuery
{
Greenify();
Greenify(Optionen: Färben.GreenifyOptions);
}

(function ($)
{
    $.fn.Greenify = function (options)
    {
        return new Coloring.Greenify(this, options);
    }
})(jQuery);

jQuery
var $elems = $('a').Greenify(options);

Aber es bedeutet, dass ich haben, um Optionen und wenn ich den Konstruktor ohne Optionen, die ich bekommen Optionen ist nicht definiert. Die Antwort, die ich markiert habe so richtig richtig ist für die Frage, die ich gefragt habe. Aber eben im Hinterkopf behalten, dass die Antwort benötigt Sie die Optionen in Ihrem Typoskript Konstruktor, werde ich sehen, wie man Standard-Optionen und dann überschreiben Sie in dem Konstruktor, aber das ist eine andere Frage 🙂

---

Update 2

Nur, damit jeder weiß, dass ich einen Weg gefunden haben, um Optionen zu dem plugin oder nicht.

Was Sie tun können, ist diese

Typoskript Klasse

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

    }

Typoskript-Schnittstelle

interface JQuery
{
    Greenofy();
    Greenify(obj?: any);
    Greenify(options?: Coloring.GreenifyOptions);
}

(function ($)
{
    $.fn.Greenify = function (options)
    {
        return new Coloring.Greenify(this, options);
    }
})(jQuery);

jQuery code zum Aufruf des plugins mit einem optionalen option

$(function ()
{
    var $elems = $('a').Greenify(<Coloring.GreenifyOptions>{
        color: '#00F'
    });
});

Also nicht die Ausgabe der Anker Hintergrundfarbe '#00F', die die Standard-und die Wahl die ich habe, zur Verfügung gestellt werden, stellen Sie die anchor-text-color '#00F'.

Ich hoffe, dies hilft jemand anderes, der das gleiche problem hat wie ich 🙂