Using jQuery with Typescript 2

Question

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');
    }
}

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.