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

33
votes

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");
5
jquerytypescripttypescript-typings
How do you compile the project? Also it seems that your tsconfig.json definition is wrong. You can't use both exclude and files (files will win in this case, so maybe path is wrong). Also you don't need /// <reference if tsconfig.json used - Aleksey L.
You can refer below link for this solution its work for use $ and query all function in typescript. Link : c-sharpcorner.com/article/typescript-with-jquery - shital patel

5 Answers

42
votes

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.

14
votes

I don't know if it helps but I solved the same issue for my datepicker.

First I installed jQuery with this command: npm install --save-dev @types/jquery

Then add the dependencies in your angular-cli.json file:

"styles": [
            "../node_modules/bootstrap/dist/css/bootstrap.css",
            "../node_modules/font-awesome/css/font-awesome.css",
            "../node_modules/ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker3.min.css",
            "styles.css"
        ]

"scripts": [
            "../node_modules/jquery/dist/jquery.js",
            "../node_modules/ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js"
        ]

I think adding the jQuery part might work out for you. Please let me know if it works.

1
votes

Install and import following package. it will solved for error ("Cannot find name '$'"). Angular version is 7

import 'datatables.net';

1
votes
import * as $ from "jquery";

didn't work for me. Interesting enough,

import { ajax, css } from "jquery";

actually solved my problem.

-3
votes

You probably have some vulnerabilities you need to fix.

Run npm audit fix to fix them, or npm audit for details.