typescript error: TS2304: Cannot find name '$'

Question

The statement

 x = $('#msgBox_' + scope.boxId).position().left;

generates an

error TS2304: Cannot find name '$'

although jquery and @types are installed in the node_modules folder.

My tsconfig.json looks like that:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "moduleResolution": "node",
    "declaration": true
  },
  "exclude": [
    "node_modules"
  ]
}

How can I fix that?

Answer 1

If AngularCLI is where your injecting JQuery, then in your controller/component, you can declare the variable like so:

declare var $: any;

Answer 2

Did you try to :

 import $ = require('jquery');

at the 1 line? This should work. Though you should have a deeper look into es6 modules and ts modules to get a grip on how you could take advantage of the es6 modular system. Also d.ts files...

This should be helpful: https://www.typescriptlang.org/docs/handbook/modules.html

Answer 3

Turns out I was missing the "@types/jquery" node module, which contains a definition of "$". Once I added "@types/jquery": "^3.2.5" to the list of "devDependencies" in my package.json and reinstalled via "npm install", everything worked fine.

Answer 4

One reason for this kind of error is your node_modules doesn't contain the type definitions for jquery ie. the package @types/jquery is missing.

My workaround is as follows:

1. Open the command prompt in the root of your project folder and type:

   npm install --save @types/jquery.

   If you are posed with a question to choose the version, choose the latest one.

2. Once the above command ends successfully, run yarn install.

3. Once the above install is success, run yarn start to start your project.