首页 文章

将jQuery插件转换为TypeScript

提问于
浏览 次
14

好的，首先，这是我非常基本的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

我尝试了一些东西，我得到的最接近的是这个 .

打字稿

/// <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接口JQuery {Greenify（）; Greenify（选项：Coloring.GreenifyOptions）; }

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

jQuery var $ elems = $（'a'） . 绿化（选项）;

然而，这意味着我必须提供选项，如果我没有选项的构造函数，我得到的选项是未定义的 . 我已经勾选的答案是正确的，这对我提出的问题是正确的 . 但是请记住，所提供的答案需要您在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);

用一个可选选项调用插件的jQuery代码

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

因此，输出不会使锚点背景颜色为“＃00F”，这是默认设置，我提供的选项会使锚文本颜色为“＃00F” .

我希望这能帮助其他与我有同样问题的人:)

javascript jquery html typescript

2 回答

  • 6

    您可以创建 reference 自己的定义文件 greenify.d.ts 并添加如下函数：

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

    然后你可以简单地称之为：

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

    要么

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

    Explanation:

    在编译时，typescript实际上将合并所有接口定义 .

    Side Note:

    如果你坚持要完全像_1029809那样，那么你将不得不改变更多：

    • 着色不可能是你的模块's name anymore as you'必须在上面的接口定义中使用它

    • 您可能必须创建一个将.Greenify作为静态方法的类

    • 可能更多......

    总而言之，我可能更容易坚持使用我的初始解决方案，因为它不那么冗长，但这取决于你 .

    希望有所帮助

    Update:

    要考虑默认选项，您可以修改接口定义以进行覆盖：

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

interface IGreenifyOptions
{
    color?: string;
    backgroundColor?: string;
}
    回复于
  • 8

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

    Demo

    回复于

相关问题