将JQueryUI与TypeScript和DefinitelyTyped定义文件一起使用时出错 [英] Error when using JQueryUI with TypeScript and DefinitelyTyped definition file

问题描述

所以我试图将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添加了定义文件.

So I'm trying to use JQueryUI with TypeScript and so far I've installed JQueryUI with npm install jquery-ui-dist and JQuery with npm install jquery. I've also added the definition files from DefinitelyTyped with npm install --save-dev @types/jquery and npm install --save-dev @types/jquery-ui.

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

I've got the following file (some parts omitted):

///<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({
            ...
        });
    }
}

在构建并运行时，出现以下错误:

And upon building and running I get the following error:

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

所以我想我的导入JQueryUI的方式有问题吗?还是JQueryUI未正确安装?尽管导入和定义在VS Code中似乎可以正常工作.

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.

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

This is also how I'm using them in the HTML file:

<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结合使用的任何想法?

Any ideas on how to solve the problem and use JQueryUI with TypeScript?

推荐答案

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

This is not a TypeScript error, this is a runtime error.

jQueryUI 实际上被加载了两次！

jQueryUI is actually being loaded twice!

一次通过脚本标签

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

，然后再次在您的模块中.

and then again in your module.

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

export default class ....

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

The code in the module above is correct, but the script tag is causing failure.

另外，我看到你有

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

删除此！虽然它不会引起运行时问题，但该构造仅在使用全局变量而不是模块编写应用程序代码时使用.

Remove this! While it won't cause a runtime issue, that construct is for use when application code itself is written using globals, not modules.

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

If the types are not automatically picked up, either specify

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

或使用(显示在node_modules旁边的tsconfig.json中)

or use (shown with tsconfig.json next to node_modules)

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

这篇关于将JQueryUI与TypeScript和DefinitelyTyped定义文件一起使用时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！