How to use jQuery with TypeScript

ID : 20408

viewed : 9

Tags : typescripttypescript

Top 5 Answer for How to use jQuery with TypeScript

vote vote

92

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 
vote vote

86

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 ... 
vote vote

77

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.

vote vote

63

For Angular 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 in "types"

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

58

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.

Top 3 video Explaining How to use jQuery with TypeScript

Related QUESTION?