Typescript and JQuery compile error: Cannot find name '$'

Question

I'm testing typescript with jquery, but when I compile the test.ts file, it always gives me an error indicating: Cannot find name '$'.

I've already imported jquery & added its definition reference. If I use import $ = require("jquery") in my test.ts file, another error "Cannot find module jquery" will occur when doing the tsc compiling. However, the JQuery folder already exists within the node_modules folder.

Does anyone know what is the correct way to use jquery in typescript?

Below is my steps:

1. Install jquery using npm install jquery --save
2. Install typings & jquery definition using typings install --global --save dt~jquery
3. Add jquery reference at top of test.ts /// <reference path="../../../typings/globals/jquery/index.d.ts" />

tsconfig.json

{
    "compilerOptions": {
        "jsx": "react",
        "outDir": "./dist",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "experimentalDecorators": true
    },
    "exclude": [
        "node_modules"
    ],
    "files": [
        "./typings/index.d.ts",
        "./src/wo/tests/test.ts",
    ]
}

test.ts

/// <reference path="../../../typings/globals/jquery/index.d.ts" />

let test:any=$("div");

Answer 1

If you find these errors 90% of the time its because of versioning Problem of @types/jquery

Try running:

 npm install jquery --save

Then in app.module.ts:

import * as $ from 'jquery';

Then run:

  npm install @types/[email protected]

And you should be ready to go.