11

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

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.

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

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

Improve this question
7
  • 1
    try to import jquery-ui using import "jquery-ui-dist/jquery-ui"; and let me know what happening. Are you using webpack? Commented Apr 10, 2017 at 13:42
  • @Diullei thank you for your comment but it seems to throw the same error: Uncaught TypeError: n(...).resizable is not a function Commented Apr 11, 2017 at 20:08
  • 1
    Remove the script tag. This is not a TypeScript error, this is a runtime error. You are loading jquery-ui twice! once in the script tag <script src="node_modules/jquery-ui-dist/jquery-ui.mis.js"></script> and then again in your module withimport * as $ from "jquery"; import "jquery-ui"; The code in the module is correct, but the script tag will cause failure. Commented Apr 16, 2017 at 4:03
  • 1
    This solved it! if you make an answer with this explanation I'll mark it as the solution @AluanHaddad Commented Apr 16, 2017 at 15:56
  • @SashaFonseca glad your problem is resolved. I added my comment (slightly edited) as an answer, thank you. Commented Apr 16, 2017 at 22:55

2 Answers 2

Reset to default
15
+100

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

jQueryUI is actually being loaded twice!

Once via a script tag

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

Additionally, I see that you have

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

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"
    ]
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Update: see working 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.

It's a problem when compiling the typescript. The <script> tags aren't important for that.

When checking the jqueryui/index.d.ts, you could see resizable is defined there:

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;
    ... 
}

(See index.d.ts on GitHub)

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

There is no jquery-ui? It should be @types/jqueryui

After correctly installing the packages @/types/jquery-ui it works for me:

///<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({

        });
    }
}

In VS code:

Also from commandline, no errors and a javascript file is created (running from Powershell):

& "C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.1\tsc.exe" .\test.ts

If is still not working, please share your tsconfig.json (if you have one) and the code and command how it doesn't compile

Improve this answer

6 Comments

Hello Julian, thank you for your reply but it still does not work. I've correctly installed the @types/jqueryui package. I've confirmed I can find the interface JQuery with the resizable stuff like you shown. VSCode also shows the suggestions and autocompletion like you shown.
Here's my tsconfig.json "sourceMap": true, "module": "commonjs", "moduleResolution": "node", "isolatedModules": false, "jsx": "react", "experimentalDecorators": true, "emitDecoratorMetadata": true, "declaration": false, "noImplicitAny": false, "removeComments": true, "noLib": false, "preserveConstEnums": true, "suppressImplicitAnyIndexErrors": true, "noUnusedParameters": false, "noUnusedLocals": true } }
github.com/remojansen/ts-vscode-boilerplate this is the boiler plate I'm using. I'm also building with gulp build
do you use some kind of module loader?
could you also include the calling script? Please edit your original post
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.