使用打字稿制作 jquery ui 的最佳方法答案

【问题标题】：Best way to make jquery ui with typescript使用打字稿制作 jquery ui 的最佳方法
【发布时间】：2012-12-08 11:13:28
【问题描述】：

我正在制作一个 jquery 小部件，其中 widget factory 在 typescript 中输入。如何在无需编写 .d.ts 的情况下提供良好的智能感知？

例如：

/*mywidget.ts*/

$.widget("ui.mywidget", {
    options: {
        myoption: ""
    },
    doSomething: function () {
        this._hasDoSomething = true;
        /*do doSomething*/
    },
    hasDoSomething: function (): bool {
        return <bool>this._hasDoSomething;
    }
});

/*mywidget.d.ts*/
interface MyWidgetOptions {
    myoption: string;
}

interface MyWidget extends Widget, MyWidgetOptions {}

interface NLIB { 
    mywidget: MyWidget;
}

interface JQuery {
    mywidget(): JQuery;
    mywidget(methodName: string): JQuery;
    mywidget(options: MyWidgetOptions): JQuery;
    mywidget(optionLiteral: string, optionName: string): any;
    mywidget(optionLiteral: string, options: MyWidgetOptions): any;
    mywidget(optionLiteral: string, optionName: string, optionValue: any): JQuery;
}

interface JQueryStatic {
    nlib: NLIB;
}


/// <reference path="teste.d.ts" />
$(".teste").mywidget({
    myoption: "asdadds"
});

为每个插件编写 .d.ts 太无聊了。有什么选择吗？

注意：如果我不包含 mywidget.d.ts，则此代码将无法编译，并且我将没有智能感知：

///<reference path="path/to/jqueryui-1.9.d.ts"/>
$(".teste").mywidget({ 
    myoption: "asdadds"
});

/* 编译器输出： ...“JQuery”类型的值上不存在属性“mywidget” */

【问题讨论】：

我相信我分享这个问题的动机。我喜欢 typescript，但我希望它对 typescript-“native” DOM 操作库有一个很好的答案，可以扩展它以构建 typescript-native UI 小部件（如自动完成）。我明白为什么 JQuery UI Widget Factory（我也很喜欢，pre-typescript）在这里不匹配，但是还有什么更适合打字的解决方案呢？

标签： jquery-ui typescript jquery-widgets

【解决方案1】：

GitHub 上的DefinitelyTyped 项目为大多数流行的 JavaScript 库提供了定义文件。

您需要做的就是下载您需要的文件并在您的代码中引用它，例如：

///<reference path="path/to/jqueryui-1.9.d.ts"/>

【讨论】：

如果我不包含 mywidget.d.ts，此代码将无法编译并且我将没有智能感知：/// $(".teste").mywidget({ myoption: "asdadds" }); /* 编译器输出: ... 'JQuery' 类型的值上不存在属性 'mywidget' */
所以你的 viewModel 会有这样的东西 ///<reference path="../../../node_modules/@types/jqueryui/index.d.ts"/> import * as $ from "jquery"?

【解决方案2】：

如果您不想要 .d.ts 文件，只需在界面前使用 declare 关键字。例如，请参阅我的回答 https://stackoverflow.com/a/16967239/1859442

【讨论】：