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">

有关如何解决问题并使用TypeScript使用JQueryUI的任何想法吗？

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（如果有的话）以及代码和命令如何不编译

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

2 个答案: