将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

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

打字稿

 ///  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元素。 任何人都可以对此有所启发，以帮助我。

PS以上我的工作正常，我只是想改变调用代码。

---

更新

这就是我现在拥有的，它的工作原理

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({ color: '#00F' }); }); 

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

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

Answer 1

您可以创建和引用自己的定义文件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; } 

Answer 2

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

演示