How to use jQuery using TypeScript

Question

I'm trying to

$(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 the package.json file, run the following command:

 npm install --save-dev @types/jquery 

Then the compiler will automatically resolve the definitions for jquery.

Option 2. Manual download (not recommended)

Download it here .

Option 3. Using typing (up to TS 2.0)

If you use typing , you can enable it as follows:

 // 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 ( $ ) into the desired TypeScript file to use as usual.

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

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

Also install the package?

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

 npm install --save jquery 

Answer 2

FOR Visual Studio Code

What works for me is to make sure that I am doing the standard loading of the jQuery library through script> in index.html.

Run

 npm install --save @types/jquery 

JQuery $ functions are now available in all .ts files, without the need for any other imports.

Answer 3

In my case, I had to do it

 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 A.ts script A.ts

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

Answer 4

I believe that for jQuery you may need typewritten typewriting. Since you said you were using Visual Studio, you can use Nuget to get them.

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

Command in the Nuget Package Manager Console

 Install-Package jquery.TypeScript.DefinitelyTyped 

Update: as noted in the comment, this package has not been updated since 2016. But you can still visit their Github page at https://github.com/DefinitelyTyped/DefinitelyTyped and download the types. Navigate to the folder for your library, and then upload the index.d.ts file index.d.ts . Put it anywhere in the project directory, and VS should use it immediately.

Answer 5

You need to declare jquery / $ in your component if tsLint is enabled for these types of type checks.

E.g.

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

This works great with other third-party libraries, if installed.

Answer 6

For corner CLI V7

 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 to "types"

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

Answer 7

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

On the web page you can do:

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

so you don’t have to download jquery a second time (with npm install --save jquery ) but there are all the benefits of Typescript

Answer 8

This works for me:

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

Answer 9

I am writing a blog post here to resolve this issue.

Answer 10

Here are my steps for configuring TypeScript & jQuery.

This makes jQuery type support work better than most articles on the web . ( I believe. )

the 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:

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

It is smooth and silky !!!