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');
    }
}
Community
  • 1
  • 1
user2073333
  • 152
  • 1
  • 9
  • have you done `npm install jquery --save` along with this? – Suraj Rao Jan 24 '17 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. – user2073333 Jan 24 '17 at 12:39

4 Answers4

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
k0pernikus
  • 60,309
  • 67
  • 216
  • 347
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.

k0pernikus
  • 60,309
  • 67
  • 216
  • 347
user2073333
  • 152
  • 1
  • 9
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.

nashcheez
  • 5,067
  • 1
  • 27
  • 53
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.

Jonas
  • 1