5

I'm new to Typscript 2. What i'm trying to do is to use jQuery within typescript. In this question i read that you need two things:

npm install --save-dev @types/jquery

This installs package '@types/jquery 2.0.39'.

"devDependencies": {
    "@types/jquery": "^2.0.39",
    "typescript": "^2.0.2",
    "typings": "^1.0.4"
  }

Then, in the Typescript file i put this:

import $ from "jquery";

but i got typescript error 'Cannot find module 'jquery'. What am I doing wrong?

Same error with

import $ = require("jquery");

Full typescript file:

import { Component } from '@angular/core';
import $ from "jquery";

@Component({
  selector: 'my-app',
  template: `<div id="test"></div>`,
})
export class AppComponent  {
    constructor() {
        $('#test').html('This is a test');
    }
}
2
  • have you done npm install jquery --save along with this?
    – Suraj Rao
    Jan 24, 2017 at 12:23
  • Yes, i have. Now I have errors in index.d.ts file, for instance: Line: attr(attributeName: string, value: string|number|null): JQuery; Error1: A parameter initializer is only allowed in a function or constructor implementation. Error2: Type expected. Jan 24, 2017 at 12:39

4 Answers 4

5

You only install jquery's typings. You will need jQuery itself, too:

npm install jquery --save

Furthermore, since you use typescript@2, you don't need the typings package anymore. This will now be handled via npm and the @types packages, available at $types/{your-package}, in your case @types/jquery:

npm install @types/jquery --save
3

I installed Visual Studio update (Tools -> Extensions and Updates) "Typescript 2.0.6 for Visual Studio 2015".

Also, I installed the following NuGet packages:

  • Microsoft.TypeScript.Compiler
  • Microsoft.Typescript.MSBuild

Then I installed jQuery and jQuery typings via npm:

npm install jquery @types/jquery --save

And finally, in tsconfig.json::

"compilerOptions": {
    ... other compiler options ...
    "typeRoots": [ "node_modules/@types/" ],
    "types": ["jquery" ]
  },

Now I can build the project and $ is recognized as jQuery inside the TypeScript.

1
  • Thanks so much, the typeRoots property saved me. I did not have NPM or a node_modules folder, I just wanted to get proper types by installing @types/jquery using libman. But without the whole NPM thing tsc seems to not know where his types are, even when you add them to your include list. Oct 17, 2023 at 14:33
1

What I would do is a basic npm install for jQuery first in your project directory.

npm install jquery

And then use it via:

import $ = require('jquery');

Always works.

5
  • Does this take typescript and its typing into account?
    – k0pernikus
    Jan 24, 2017 at 12:23
  • Does work in Typescript projects, ignores typings initially. If you want typings, you can install via provided repo.
    – nashcheez
    Jan 24, 2017 at 12:27
  • 1
    I did this, but the module is still not available (cannot find module jquery) Jan 24, 2017 at 13:01
  • This was the key for me. I was trying to do import $ from "jquery"; but import $ = require('jquery'); worked.
    – DavGarcia
    May 8, 2017 at 13:36
  • To add to the above, I was using "module": "commonjs" in tsconfig.js. If using "module": "es6" then you'd want to use import $ from "jquery";
    – DavGarcia
    May 8, 2017 at 15:13
0

Now I have errors in index.d.ts file, for instance: Line: attr(attributeName: string, value: string|number|null): JQuery; Error1: A parameter initializer is only allowed in a function or constructor implementation. Error2: Type expected

Not an answer to your original question but to the follow-up, as i am not allowed to answer on your comment: I had the same error, as a workaround i removed the offending line from the index.d.ts of jQuery and was able to use jQuery whithin typescript. I do not know yet if this has any unwanted side-effects though, so use this at your own risk.

1
  • Thanks for the input, i'll give it a shot, since i ran out of options Jan 27, 2017 at 8:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.