Konwersja plugin jQuery maszynopis

Question

Ok, więc po pierwsze tu jest mój bardzo prosty plugin jQuery

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

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

Zasadniczo to wszystko nie jest zmienić kolor tekstu i tła-kolor z dostarczonego elementu. Teraz staram się przekonwertować tę prostą wtyczkę na TypeScript

Próbowałem kilku rzeczy, a najbliższe było to.

maszynopis

/// <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, który nazywa go

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

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

Jednak nie chcę, aby zapewnić element jak wyżej new Coloring.Greenify($(this), options), ja po prostu chcę zrobić coś takiego

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

lub

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

Ale nie mogę sobie wyobrazić, jak powiedzieć TypeScript, że element, do którego jest on podłączony, to element Jquery. Czy ktokolwiek mógłby oświetlić to, żeby mi pomóc?

P.S. powyższe mam działa dobrze, po prostu chcę zmienić kod wywołujący.

---

Aktualizacja

To jest to, co mam w tej chwili i to działa

maszynopis interfejsu JQuery { Greenify(); Greenify (opcje: Coloring.GreenifyOptions); }

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

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

Jednakże oznacza to, że muszę podać opcje, a jeśli wykonam konstruktor bez opcji, otrzymam opcje nieokreślone. Odpowiedź, którą zakomentowałem jako poprawną, jest poprawna w odniesieniu do pytania, które zadałem. Jednak po prostu pamiętać, że odpowiedź warunkiem wymaganym podać opcje do swojego konstruktora maszynopis, idę zobaczyć, w jaki sposób mają domyślne opcje, a następnie zastąpić je w konstruktorze, ale to inna kwestia :)

---

Aktualizacja 2

Po prostu, aby wszyscy wiedzieli, że znalazłem sposób na udostępnienie opcji wtyczki.

Co można zrobić to

klasa maszynopis

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

    } 

Interfejs maszynopis

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

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

kod jQuery do wywołania wtyczki z jedną opcjonalną możliwością

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

W związku z tym wynik nie spowoduje, że kotwica będzie miała kolor tła "# 00F", który jest domyślny, a opcja, którą podałem, sprawi, że tekst kotwicy będzie miał kolor "# 00F".

Mam nadzieję, że to pomoże nikomu, że jest ten sam problem jak ja :)

Answer 1

Ty można utworzyć i uzyskać odniesienie złożyć definicje WN greenify.d.ts i dodać funkcję tak:

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

Następnie można prosty nazwać jak:

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

lub

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

Objaśnienie:

Na czas kompilacji maszynopisu będzie faktycznie połączyć wszystkie definicje interfejsów.

marginesie:

jeśli jesteś nieugięty o posiadanie go dokładnie tak, jak $('a').Coloring.Greenify(..) wtedy będziesz musiał zmienić wiele więcej:

• Farbowanie kulisy być nazwa modułu jest już za tobą Musiałby go użyć w definicji interfejsu powyżej:
• Prawdopodobnie musiałbyś utworzyć klasę, która ma .Zielona jako metoda statyczna
• Prawdopodobnie więcej ...

Podsumowując, prawdopodobnie łatwiej jest pozostać przy moim początkowym rozwiązaniu, ponieważ jest on nieco mniej szczegółowy, ale to zależy od Ciebie.

nadzieję, że pomoże

Aktualizacja:

celu uwzględnienia opcji domyślnych można zmienić definicję interfejsu mieć przesłonięcia:

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

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

Answer 2

Tworzenie wtyczek jQuery wraz z maszynopis można się nieco niechlujny. Osobiście wolę zachować składnię wtyczek jQuery, głównie ze względu na spójność i łatwość konserwacji.

Więc po deklaracji modułu można w zasadzie owinąć wokół implementacji rozciągający prototyp jQuery jako:

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

Pobieranie wtyczki jak:

$(function() { 

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

Demo