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');
    }
}
Improve this question
2
  • have you done npm install jquery --save along with this? Commented 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. Commented Jan 24, 2017 at 12:39

4 Answers 4

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

Comments

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.

Improve this answer

1 Comment

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

Improve this answer

5 Comments

Does this take typescript and its typing into account?
Does work in Typescript projects, ignores typings initially. If you want typings, you can install via provided repo.
I did this, but the module is still not available (cannot find module jquery)
This was the key for me. I was trying to do import $ from "jquery"; but import $ = require('jquery'); worked.
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";
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.

Improve this answer

1 Comment

Thanks for the input, i'll give it a shot, since i ran out of options

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.