using jquery with typescript

Question

I am new to this so bear with me. What i am trying to do is getting jquery to work in a typescript code file.

How should i refer to the .d.ts code?

I have tried the following:

import * as $ from "jquery";

this gives me the error: "'jquery' resolves to non-module entity and cannot be imported with this construct"

then i tried:

import $ = require("jquery");

this gives the following error: Import assignment cannot be used when targeting EcmaScript 2015 modules

How do I go about this to make jquery functions work in my typescript code? Are there other ways?

I am using typescript 2.5.2, module system ES2015, EcmaScript 6 and @types/jquery.

EDIT

i tried import * as $ from "../wwwroot/lib/jQuery/dist/jquery.min.js";, now it gives me the error "... has been resolved ... but --allowJs is not set",I dont have a tsconfig.json yet, I probably need it for the --allowJs command, is that right?

Try to use relative path to jquery: import * as $ from "path/to/jquery"; — P.S.
– P.S., Commented Sep 17, 2017 at 14:07
I am doing import * as jQuery from 'jquery'. It should work if jQuery is installed through NPM. — alpinist
– alpinist, Commented Sep 17, 2017 at 14:07
i have installed it through npm as well, i am gonna try to be more specific with my path — Stanislaw T
– Stanislaw T, Commented Sep 17, 2017 at 14:09
i tried import * as $ from "../node_modules/@types/jquery"; and import * as $ from "../node_modules/@types/jquery/index.d.ts"; and it doesnt work either — Stanislaw T
– Stanislaw T, Commented Sep 17, 2017 at 14:14

Hamed Javaheri · Accepted Answer · 2017-09-17 15:49:21Z

5

add a reference to the Typescript definition file the top of the file.

/// <reference path ="jquery.d.ts"/>

instead of

import * as $ from "jquery";

According to the DefinitelyTyped wiki:

A TypeScript declaration file is way of defining the types, functions and parameters in an external third-party JavaScript library. By using a declaration file in your TypeScript code will enable Intellisense and type checking against the external library you are using.

jquery.d.ts is a part of the DefinitelyTyped Library found on GitHub. and also you can install via npm.

answered Sep 17, 2017 at 15:49

Hamed Javaheri

5483 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stanislaw T Over a year ago

this compiles, but the resulting .js file does not contain a definition of jquery and thus fails to execute

Hamed Javaheri Over a year ago

You have to add jquery.js file to page for executing jquery functions.

Rainer Plumer · Accepted Answer · 2017-09-17 14:35:43Z

0

I dont know it this is a "correct way" of doing things, but i use the following line in my typescript project to use jquery.

const jquery = require('jquery');
// and then later in your class
jquery('.someclass').show();

answered Sep 17, 2017 at 14:35

Rainer Plumer

3,7533 gold badges28 silver badges42 bronze badges

2 Comments

Stanislaw T Over a year ago

it gives me the error "Cannot find name 'require' "

alpinist Over a year ago

If you want to use require, you need to declare it: declare function require(moduleName: string): any;

Collectives™ on Stack Overflow

using jquery with typescript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related