web-dev-qa-db-ja.com

jQueryプラグインをTypeScriptに変換する

さて、最初にここに私の非常に基本的なjQueryプラグインがあります

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

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

基本的にこれは、提供された要素でテキストの色と背景色を変更するだけです。今私がやろうとしていることは、この単純なプラグインをTypeScriptに変換することです

私はいくつかのことを試しました、そして私が得た最も近いものはこれです。

TypeScript

_/// <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

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

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

しかし、上記のような要素を提供したくないnew Coloring.Greenify($(this), options)、基本的にはこのようなことをしたい

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

または

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

しかし、TypeScriptに既にアタッチされている要素がJquery要素であることをどのように伝えるかわかりません。誰かが私を助けるためにこれにいくつかの光を当てることができますか？.

追伸上記はうまく機能していますが、呼び出しコードを変更したいだけです。

更新

これは私が現在持っているものであり、うまくいきます

TypeScript

_interface JQuery
{
    Greenify();
    Greenify(options: Coloring.GreenifyOptions);
}

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

jQuery

_var $elems = $('a').Greenify(options);
_

しかし、それはオプションを提供する必要があることを意味し、オプションなしでコンストラクターを実行した場合、オプションを取得できません。私が正しいと答えたのは、私が尋ねた質問に対して正しいです。ただし、提供された回答ではTypeScriptコンストラクターにオプションを提供する必要があることを覚えておいてください。デフォルトのオプションを設定し、コンストラクターでそれらをオーバーライドする方法について説明しますが、これは別の質問です:)

アップデート2

皆さんにプラグインにオプションを提供する方法を見つけたかどうかを知らせるためだけに。

あなたができることはこれです

TypeScriptクラス

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

    }
_

TypeScriptインターフェース

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

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

1つのオプションオプションでプラグインを呼び出すjQueryコード

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

したがって、出力では、アンカーの背景色はデフォルトの「＃00F」になりません。また、提供したオプションでは、アンカーテキストの色は「＃00F」になります。

これが私と同じ問題を抱えている他の人を助けることを願っています:)

javascriptjqueryhtmltypescript
19
Canvas

reference独自の定義ファイル_greenify.d.ts_を作成して、次のような関数を追加できます。

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

その後、次のように簡単に呼び出すことができます。

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

または

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

説明：

コンパイル時に、TypeScriptは実際にすべてのインターフェース定義をマージします。

サイドノート：

$('a').Coloring.Greenify(..)とまったく同じにすることに固執している場合は、さらに変更する必要があります。

  • 上記のインターフェース定義で使用する必要があるため、カラーリングはモジュールの名前である必要はありません
  • おそらく、.Greenifyを静的メソッドとして持つクラスを作成する必要があります
  • おそらくもっと...

全体的に言って、それは少し冗長ではないので、おそらくあなた次第です。

それが役に立てば幸い

更新：

デフォルトのオプションを説明するために、インターフェース定義を変更してオーバーライドすることができます。

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

interface IGreenifyOptions
{
    color?: string;
    backgroundColor?: string;
}
_
7
jsonmurphy

TypeScriptと共にjQueryプラグインを作成すると、少し面倒になる可能性があります。私は個人的には、jQueryプラグインのチェーン構文を維持することを好みます。

したがって、モジュール宣言の後、基本的にjQueryプロトタイプを拡張して実装をラップすることができます。

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

プラグインを次のように取得します：

$(function() {

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

デモ

8
vorillaz