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

Question

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

我有以下文件(省略了一些部分):

///<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"
    ]
  }
}