Error when using jQueryUI with TypeScript and DefinitelyTyped definition file

Question

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

I have the following file (some parts are 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 when creating and starting, I get the following error:

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

So, I think there are some problems with my JQueryUI import method? Or maybe jQueryUI is not installed correctly? Although import and definitions seem to work correctly in VS Code.

This is also how I use 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">

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

Answer 1

TypeScript, .

jQueryUI !

script

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

.

import $ = require("jquery");
import "jquery-ui";

export default class ....

, script .

, ,

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

! , , , .

,

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

( tsconfig.json node_modules)

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

typescript. <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 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 SDK\ TypeScript\2.1\tsc.exe". \Test.ts

, tsconfig.json( ) ,