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

Question

所以我正在尝试将 JQueryUI 与 TypeScript 一起使用，到目前为止我已经安装了 JQueryUI 与 npm install jquery-ui-dist 和 JQuery 与 npm install 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

更新：查看工作 jsfiddle

So I guess there's some problem with my way of importing JQueryUI? Or maybe JQueryUI was not installed correctly? Although the import and definitions seem to be working correctly in 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）

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

没有jquery-ui? It should be @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.1\tsc.exe" .\test.ts

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

Answer 2

这不是 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"
    ]
  }
}

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

Error when using JQueryUI with TypeScript and DefinitelyTyped definition file

javascript

jquery-ui

typescript

npm

definitelytyped