How to use jQuery with TypeScript

Question

I am trying

$(function(){ 
    alert('Hello'); 
});

Its showing this error in Visual Studio: (TS) Cannot find name '$'.. How can I use jQuery with TypeScript ?

Answer 1

Most likely you need to download and include the TypeScript declaration file for jQuery—jquery.d.ts—in your project.

Option 1: Install the @types package (Recommended for TS 2.0+)

In the same folder as your package.json file, run the following command:

npm install --save-dev @types/jquery

Then the compiler will resolve the definitions for jquery automatically.

Option 2: Download Manually (Not Recommended)

Download it here.

Option 3: Using Typings (Pre TS 2.0)

If you're using typings then you can include it this way:

// 1. Install typings
npm install typings -g
// 2. Download jquery.d.ts (run this command in the root dir of your project)
typings install dt~jquery --global --save

---

After setting up the definition file, import the alias ($) in the desired TypeScript file to use it as you normally would.

import $ from "jquery";
// or
import $ = require("jquery");

You may need to compile with --allowSyntheticDefaultImports—add "allowSyntheticDefaultImports": true in tsconfig.json.

Also Install the Package?

If you don't have jquery installed, you probably want to install it as a dependency via npm (but this is not always the case):

npm install --save jquery

Answer 2

In my case I had to do this

npm install @types/jquery --save-dev // install jquery type as dev dependency so TS can compile properly
npm install jquery --save // save jquery as a dependency

Then in the script file A.ts

import * as $ from "jquery";
... jquery code ...

Answer 3

For Angular CLI V2+

npm install jquery --save
npm install @types/jquery --save

Make sure jquery has an entry in angular.json -> scripts

...
    "scripts": [
        "node_modules/jquery/dist/jquery.min.js"
    ]
...

Go to tsconfig.app.json and add an entry in "types"

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "types": ["jquery","bootstrap","signalr"]
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

Answer 4

FOR Visual Studio Code

What works for me is to make sure I do the standard JQuery library loading via a < script > tag in the index.html.

Run

npm install --save @types/jquery

Now the JQuery $ functions are available in all .ts files, no need of any other imports.

Answer 5

I believe you may need the Typescript typings for JQuery. Since you said you're using Visual Studio, you could use Nuget to get them.

https://www.nuget.org/packages/jquery.TypeScript.DefinitelyTyped/

The command in Nuget Package Manager Console is

Install-Package jquery.TypeScript.DefinitelyTyped

Update: As noted in the comment this package hasn't been updated since 2016. But you can still visit their Github page at https://github.com/DefinitelyTyped/DefinitelyTyped and download the types. Navigate the folder for your library and then download the index.d.ts file there. Pop it anywhere in your project directory and VS should use it right away.

Answer 6

UPDATE 2019:

Answer by David, is more accurate.

Typescript supports 3rd party vendor libraries, which do not use Typescript for library development, using DefinitelyTyped Repo.

---

You do need to declare jquery/$ in your Component, If tsLint is On for these types of Type Checkings.

For Eg.

declare var jquery: any;
declare var $: any;

Answer 7

Here is my TypeScript & jQuery config steps.

It makes jQuery's types support to work better than the most articles in the internet . ( I believe. )

first:

npm install jquery --save
npm install @types/jquery --save-dev

second( very very very important ! ! ! ):

import jquery = require("jquery");



// this helps TypeScript to understand jQuery best !!!  otherwise It will confused .
const $: JQueryStatic = jquery;

then , You Can Enjoy It :

$(document).ready(function () {
    $('btn').click(function () {
       alert('I am clicked !')
    }
}

It's silky smooth !!!

Answer 8

You can declare globals by augmenting the window interface:

import jQuery from '@types/jquery';

declare global {
    interface Window {
        jQuery: typeof jQuery;
        $: typeof jQuery;
    }
}

Sources:

• https://stackoverflow.com/a/12709880/4642023
• https://mariusschulz.com/blog/declaring-global-variables-in-typescript#augmenting-the-window-interface

Answer 9

If you want to use jquery in a web application (e.g. React) and jquery is already loaded with <script src="jquery-3.3.1.js"...

On the webpage you can do:

npm install --save-dev @types/query
and the use it with:
let $: JQueryStatic = (window as any)["jQuery"];

so, you don't need to load jquery a second time (with npm install --save jquery) but have all the advantages of Typescript

Answer 10

This work for me now and today at Angular version 9

1. Install via npm this: npm i @types/jquery just add --save to setup globally.
2. Go to tsconfig.app.json and add in the array "types" jquery .
3. ng serve and done.

Answer 11

My procedure for VS 2019 in a ASP.Net core project. So I don't have to mess around with the npm command line utility, and take a declarative approach using the npm config file.

1. Do you have a package.json (npm dependencies config) in the root of your project?

   • If no, right click project -> Add -> New item -> (Search npm) Select npm Configuration File and keep default filename package.json

2. Add an entry under devDependencies. This tells npm to install "@types/jquery" which is a npm package maintained by DefinitelyTyped. This is essentially the same as the npm install command shown in other answers.

   "devDependencies": {
     "@types/jquery": "3.5.1"
   }
   

3. Supposedly upon saving the file this should trigger the npm package install. I find I have to right click the package.json file and click Restore Packages (option not shown while project is in debug mode).

   • The first time you run npm restore, you should switch to the Output tab/window and change dropdown to "npm" to verify there were no errors.

4. You should see a new item under Project -> node_modules/@types/jquery/
   • index.d.ts is the main typescript definition file, which references the others.

5. Open your own typescript file, and drag the index.d.ts from the Solution Explorer onto the first line of your open typescript file. This should add at the top(relative path will vary depending on your typescript file's location):

   /// <reference path="../node_modules/@types/jquery/index.d.ts" />
   

6. Now if you start writing code inside a function of your typescript file you should be able to type jQue and get intellisense completion prompts.

Note: Lately VS has been really bad about not reflecting various changes properly until you restart, especially things involving errors-as-you-type and intellisense. You can often see even in official MS documentation them mentioning restarts needed to resolve red squigglies for example. So when in doubt, close/reopen VS. The last step is the most likely place you might find intellisense isn't working till you restart.

This method works regardless of whether you are including jQuery using a non-npm method. For example, in one project we were not using imports, npm, js modules, nor requireJS to resolve dependencies. jQuery was just a script tag link from html pages. However, I can still reference the .d.ts jQuery typedefs in order to get typescript completion/type resolution.

I could easily add a dependency in package.json for "jquery": "3.5.1" to get jQuery itself.

Also note if VS is working properly it has some slow(due to web queries) name and version completion prompts in the package.json:

Answer 12

After installation of jquery and @types/jquery (as dev dependency), use this import:

import * as $ from "jquery";

In my case only this way was helpful. (angular9)

Answer 13

Step 1. I am using yarn, you can install the jQuery & jQuery's Types following cmd.

yarn add jquery
yarn add @types/jquery -D

Step 2 In your tsx file add

import jquery from 'jquery';
const $: JQueryStatic = jquery;

Step 3: You can as the jQuery into your react component.

useEffect(() => {  
  $(() => {
    console.log("Hello JQuery!");
  });
}, []);

Answer 14

This works for me:

export var jQuery: any = window["jQuery"];

Answer 15

This block of code would need to be in a function, not outside a function in the class. Otherwise you would get the error you describe.