Conversión de un complemento de jQuery a TypeScript

Solución:

Crear complementos de jQuery junto con TypeScript puede ser un poco complicado. Personalmente, prefiero mantener la sintaxis de encadenamiento del complemento jQuery, principalmente por coherencia y facilidad de mantenimiento.

Entonces, después de la declaración del módulo, básicamente puede envolver su implementación extendiendo el prototipo de jQuery como:

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

Obteniendo el complemento como:

$(function() {

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

Manifestación

Puedes crear y referencia su propio archivo de definiciones greenify.d.ts y agregue la función como esta:

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

Entonces puedes llamarlo simplemente como:

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

o

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

Explicación:

En el momento de la compilación, el mecanografiado fusionará todas las definiciones de interfaz.

Nota al margen:

si insistes en tenerlo exactamente como $('a').Coloring.Greenify(..) entonces tendrás que cambiar mucho más:

• Colorear ya no podría ser el nombre de su módulo, ya que tendría que usarlo en la definición de interfaz anterior
• Probablemente tendría que crear una clase que tenga .Greenify como método estático
• Posiblemente más …

En general, probablemente sea más fácil seguir con mi solución inicial, ya que es un poco menos detallada, pero eso depende de usted.

Espero que ayude

Actualizar:

Para tener en cuenta las opciones predeterminadas, puede modificar la definición de la interfaz para tener anulaciones:

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

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

---

---

Utiliza Nuestro Buscador