我们目前正在将JavaScript项目翻译成TypeScript。我们的应用程序严重依赖于定制开发的jQuery UI小部件。
在我们目前的代码库中，我们使用深层复制机制来继承窗口小部件定义，例如，我们可以声明一个通用的TableWidget以及定义更多特定功能的OrdersTableWidget。
因此，我想将我的小部件定义定义为TypeScript类，然后将这些类的实例绑定到jQuery。
例如
class MyWidget {
options: Widgetoptions;
_init(){
// general initialization
}
}
class MySecondWidget extends MyWidget {
_init(){
super._init();
// specific initialization
}
}
接着
$.widget("MyNameSpace.MyWidget",new MyWidget());
$.widget("MyNameSpace.MySeWidget",new MyWidget());
此外，我想将我的自定义小部件表示为jQuery UI的Widget定义的实现
class MyWidget implements Widget {
options: Widgetoptions;
_init(){
// general initialization
}
}
所以我可以在TypeScript中使用以下语法：
$(selector).MyWidget(options);
我知道我必须使用定义文件(从DefinitelyTyped)，但是我还没有找到一个可靠的来源解释我如何在TypeScript中编写自定义的jQuery UI小部件。有没有人有这方面的经验？
任何帮助非常感谢，一如既往！
解决方法
我不知道你可以编写一个实现Widget界面的类，因为缺少重载的构造函数。您可以创建一个由Widget界面输入的变量。
一个标准的jQuery插件将代表几乎纯粹的JavaScript，不会使用模块或类，因为它最终被包装成jQuery的一部分，它本身不是模块或类。
这是一个名为plugin的空插件，看起来像任何标准的jQuery插件，但您可以看到它利用了TypeScript类型的系统，并扩展了JQuery接口以允许调用它。
/// <reference path="jquery.d.ts" />
interface JQuery {
plugin(): JQuery;
plugin(settings: Object): JQuery;
}
(function ($) {
function DoSomething(someParamater: string) : void {
}
$.fn.plugin = function (settings) {
var config = {
settingA: "Example",settingB: 5
};
if (settings) {
$.extend(config,settings);
}
return this.each(function () {
});
};
})(jQuery);
这将以正常的方式调用。
$('#id').plugin();
所以真的，我的答案是 – 你不能真正做你想要的，因为你添加到声明的jQuery接口，而不是将它们作为模块。您可以将模块包装在一个模块中，例如可将jQuery方面与您的TypeScript中使用相提并论的适配器，或者您可以从插件中调用您的类，但插件或小部件并不适用于模块或类。