将 JQueryUI 与 TypeScript 和definitelyTyped 定义文件一起使用时出错

Question

所以我正在尝试将 JQueryUI 与 TypeScript 一起使用，到目前为止，我已经安装了带有 npm install jquery-ui-dist 的 JQueryUI 和带有 npm install jquery 的 JQuery。我还使用 npm install --save-dev @types/jquery 和 npm install --save-dev @types/jquery-ui 添加了来自definitelyTyped 的定义文件。

我有以下文件（部分省略）：

///<reference path="../../node_modules/@types/jqueryui/index.d.ts"/>
import * as $ from "jquery";
import "jquery-ui";

export default class Resizer {

    public static extraMargin = 5;

    public static setVerticalResizer(...) {
        ...
        let topElem: HTMLElement = <HTMLElement> cardElem.querySelector(".my-class");

        $(topElem).resizable({
            ...
        });
    }
}

在构建和运行时出现以下错误：

Uncaught TypeError: r(...).resizable is not a function

所以我猜我导入 JQueryUI 的方式有问题？或者可能没有正确安装 JQueryUI？尽管导入和定义在 VS Code 中似乎工作正常。

这也是我在 HTML 文件中使用它们的方式：

<script src="node_modules/jquery-ui-dist/jquery-ui.mis.js"></script>
<link rel="stylesheet" href="node_modules/jquery-ui-dist/jquery-ui.min.css">

关于如何解决问题并将 JQueryUI 与 TypeScript 结合使用的任何想法？

Answer 1

这不是 TypeScript 错误，这是运行时错误。

jQueryUI 实际上被加载了两次！

通过脚本标记一次

<script src="node_modules/jquery-ui-dist/jquery-ui.mis.js"></script>

然后在你的模块中再次出现。

import $ from "jquery";
import "jquery-ui";

export default class ....

上面模块中的代码是正确的，但是脚本标签导致失败。

另外，我看到你有

///<reference path="../../node_modules/@types/jqueryui/index.d.ts"/>

删除这个！虽然它不会导致运行时问题，但当应用程序代码本身是使用全局而不是模块编写时使用。

如果没有自动选择类型，请指定

"compilerOptions": {
  "moduleResolution": "node"
}

或使用（在 node_modules 旁边显示 tsconfig.json）

"compilerOptions": {
  "baseUrl": ".", // required with paths but can be something besides "."
  "paths": {
    "jquery-ui": [
      "node_modules/@types/jqueryui/index"
    ]
  }
}

Answer 2

更新：查看工作jsfiddle

所以我猜我导入 JQueryUI 的方式有问题？或者可能没有正确安装 JQueryUI？虽然导入和定义在 VS Code 中似乎工作正常。

编译打字稿时出现问题。 <script> 标签对此并不重要。

检查jqueryui/index.d.ts 时，您可以看到resizable 在那里定义：

interface JQuery {
    ...

    resizable(): JQuery;
    resizable(methodName: 'destroy'): void;
    resizable(methodName: 'disable'): void;
    resizable(methodName: 'enable'): void;
    resizable(methodName: 'widget'): JQuery;
    resizable(methodName: string): JQuery;
    resizable(options: JQueryUI.ResizableOptions): JQuery;
    resizable(optionLiteral: string, optionName: string): any;
    resizable(optionLiteral: string, options: JQueryUI.ResizableOptions): any;
    resizable(optionLiteral: string, optionName: string, optionValue: any): JQuery;
    ... 
}

（见index.d.ts on GitHub）

和 npm install --save-dev @types/jquery-ui.

没有jquery-ui？应该是@types/jqueryui

正确安装包@/types/jquery-ui 后它对我有用：

///<reference path="node_modules/@types/jqueryui/index.d.ts"/>

export default class Resizer {

    public static extraMargin = 5;

    public static setVerticalResizer() {

        var cardElem;
        let topElem: HTMLElement = <HTMLElement> cardElem.querySelector(".my-class");

        $(topElem).resizable({

        });
    }
}

在 VS 代码中：

同样从命令行，没有错误并且创建了一个 javascript 文件（从 Powershell 运行）：

& "C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.1\tsc.exe" .\test.ts

如果仍然无法正常工作，请分享您的 tsconfig.json（如果有的话）以及无法编译的代码和命令