好的,首先这是我非常基本的 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);
or
$('a').Coloring.Greenify(Coloring.GreenifyOptions()
{
color: '#F0F',
backgroundColor: '#FFF'
});
但我似乎不知道如何告诉 TypeScript 它所附加的元素已经是Jquery
元素。谁能对此有所启发来帮助我。
附:上面我的工作正常,我只想更改调用代码。
Update
这就是我目前所拥有的并且有效
打字稿
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);
然而,这意味着我必须提供选项,如果我在没有选项的情况下执行构造函数,我得到的选项是未定义的。我勾选的正确答案对于我提出的问题来说是正确的。但是请记住,提供的答案要求您在打字稿构造函数中提供选项,我将了解如何拥有默认选项,然后在构造函数中覆盖它们,但这是一个不同的问题:)
Update 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”。
我希望这可以帮助其他和我有同样问题的人:)