将jQuery插件转换为TypeScript [英] Converting a jQuery plugin to TypeScript
问题描述
好的，首先这里是我非常基本的jQuery插件
（function（$）{
$。 fn.greenify = function（options）{
var settings = $ .extend（{
//这些是默认值
color：'＃556b2f'，
backgroundColor：'white '
}，options）;
}（jQuery））; （
$ b $（'a'）。
基本上所有这些都是使用提供的元素更改文本颜色和背景颜色。现在我想要做的就是将这个简单的插件转换为TypeScript
我已经尝试了一些东西，并且我得到的最接近的是这个。
TypeScript
///< reference path =../../ typings / jquery / jquery.d.ts/>
模块着色
{
interface IGreenifyOptions
{
color：string;
backgroundColor：string;
}
导出类GreenifyOptions实现IGreenifyOptions
{
// Fields
color：string;
backgroundColor：string;
构造函数（color：string，backgroundColor：string）
{
this.color = color;
this.backgroundColor = backgroundColor;
}
}
导出类Greenify
{
//字段
元素：JQuery;
选项：GreenifyOptions;
构造函数（元素：jQuery，选项：GreenifyOptions）
{
this.element = element;
this.options = options;
this.OnCreate（）;
}
OnCreate（）
{
this.element.css（'color'，this.options.color）.css（'background-color'， this.options.backgroundColor）;
$ b 调用它的JQuery p>
$（function（）
{
var options：Coloring.GreenifyOptions = new Coloring.GreenifyOptions（' 0F0'，'＃000'）;
var $ elems = $（'a'）;
$ elems.each（function（）
{
var结果= new Coloring.Greenify（$（this），options）
}）;
}）;
然而，我不想提供像上面的元素 new Coloring .Greenify（$（this），options），我基本上想要做这样的事情
$（ 'A'）Coloring.Greenify（选项）。
或
$（'a'）。Coloring.Greenify（Coloring.GreenifyOptions（）
{
color：'＃F0F'，
backgroundColor：'#FFF'
}）;
但是我似乎无法知道如何告诉TypeScript它已连接的元素已经是 Jquery 元素。任何人都可以点亮这些来帮助我。
以上我工作正常，我只是想改变调用代码。
更新
这就是我目前的工作方式，它可以工作
TypeScript
接口JQuery
{
Greenify（）;
Greenify（选项：Coloring.GreenifyOptions）;
pre $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ （选项）
{
返回新的Coloring.Greenify（this，options）;
}
}）（jQuery）;
jQuery
var $ elems = $（'a'）。然而，它意味着我必须提供选项，如果我没有选项的构造函数，我得到的选项是未定义的。我所问的答案是正确的。但是请记住，提供的答案要求您在打字稿构造函数中提供选项，我将看到如何使用默认选项，然后在构造函数中重写它们，但这是一个不同的问题：）
更新2
为了让大家知道我找到了一种方法来提供选项您可以做的是这个
TypeScript class
export class Greenify
{
//默认选项
static defaultOptions：IGreenifyOptions =
{
color：'＃F00'，
backgroundColor：'＃00F'
};
//字段
元素：JQuery;
选项：GreenifyOptions;
构造函数（元素：JQuery，选项：GreenifyOptions）
{
//合并选项
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接口
接口JQuery
{
Greenofy（）;
Greenify（obj？：any）;
Greenify（选项？：Coloring.GreenifyOptions）;
$ b $（函数（$）
{
$ .fn.Greenify =函数（选项）
{
返回新的着色。 Greenify（this，options）;
}
}）（jQuery）;
使用一个可选选项调用插件的jQuery代码
$（function（）
{
var $ elems = $（'a'）。Greenify（< Coloring.GreenifyOptions> {
颜色：'＃00F'
}）;
}）;
所以不是输出会使默认的锚点背景颜色'＃00F'我已经提供了将锚文本颜色'＃00F'。
我希望这可以帮助任何与我具有相同问题的人：）
您可以创建和引用自定义文件 greenify.d.ts 并添加如下函数：
接口Jquery {
greenify :(选项：Coloring.IGreenifyOptions ）=>无效
}
然后您可以简单地调用它：
$（'a'）。greenify（new GreenifyOptions（...））;
或
$（'a'）。greenify（{color：''，backgroundColor：''}）;
说明：
在编译时，typescript实际上会合并所有接口定义。
边注： 如果你坚持要完全符合 总而言之，坚持使用我的初始解决方案可能更容易，因为它有点不那么冗长，但这取决于您。 希望这有助于 更新： 要说明您可以修改的默认选项接口定义具有覆盖： Ok so first off here is my very basic jQuery plugin Basically all this does is change the text color and background-color with the provided element. Now what I am trying to do is convert this simple plugin into TypeScript I have tried a few things and the closest I got is this. TypeScript JQuery which calls it However I don't want to provide the element like the above or But I can't seem to figure how to tell TypeScript that the element it is attached to already is the P.S. the above I have works fine, I just want to change the calling code. Update This is what I have at the moment and it works TypeScript
interface JQuery
{
Greenify();
Greenify(options: Coloring.GreenifyOptions);
} jQuery
var $elems = $('a').Greenify(options); However it means I have to provide options and if I do the constructor without options I get options is undefined. The answer I have ticked as correct is correct for the question I have asked. However just keep in mind that the answer provided required you provide options into your typescript constructor, I am going to see on how to have default options and then override them in the constructor but this is a different question :) Update 2 Just to let everyone know I have found a way to provide options to your plugin or not. What you can do is this TypeScript class TypeScript Interface jQuery code to call the plugin with one optional option So not the output will make the anchors background color '#00F' which is the default and the option I have provided will make the anchor text color '#00F'. I hope this helps anyone else that is having the same problem as me :) You can create and reference your own definitions file Then you can simple call it like: or Explanation: At compile time typescript will actually merge all interface definitions. Side Note: if you're adamant about having it exactly as All in all it's probably easier to stick with my initial solution as it its a bit less verbose but that's up to you. Hope that helps Update: To account for the default options you can modify the interface definition to have overrides:
这篇关于将jQuery插件转换为TypeScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$（'a'）。Coloring.Greenify（..）那么你必须改变很多更多：
接口Jquery {
greenify：（）=>无效;
greenify :(选项：Coloring.IGreenifyOptions）=>无效;
}
interface IGreenifyOptions
{
color ?: string;
backgroundColor？：string;
}
(function ($){
$.fn.greenify = function (options) {
var settings = $.extend({
// These are the defaults
color: '#556b2f',
backgroundColor: 'white'
}, options);
}(jQuery));
$('a').greenify({
color: 'orange'
}).showLinkLocation();
/// <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);
}
}
}
$(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), I basically want to do something like this$('a').Coloring.Greenify(options);
$('a').Coloring.Greenify(Coloring.GreenifyOptions()
{
color: '#F0F',
backgroundColor: '#FFF'
});
Jquery element. Could anyone shine some light on this to help me out.
(function ($)
{
$.fn.Greenify = function (options)
{
return new Coloring.Greenify(this, options);
}
})(jQuery);
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);
}
}
interface JQuery
{
Greenofy();
Greenify(obj?: any);
Greenify(options?: Coloring.GreenifyOptions);
}
(function ($)
{
$.fn.Greenify = function (options)
{
return new Coloring.Greenify(this, options);
}
})(jQuery);
$(function ()
{
var $elems = $('a').Greenify(<Coloring.GreenifyOptions>{
color: '#00F'
});
});
greenify.d.ts and add the function like this:interface Jquery {
greenify: (options: Coloring.IGreenifyOptions) => void
}
$('a').greenify(new GreenifyOptions(...));
$('a').greenify({color:'', backgroundColor:''});
$('a').Coloring.Greenify(..) then you'll have to change a lot more:
interface Jquery {
greenify: () => void;
greenify: (options: Coloring.IGreenifyOptions) => void;
}
interface IGreenifyOptions
{
color?: string;
backgroundColor?: string;
}
