I am trying
$(function(){
alert('Hello');
});
Its showing this error in Visual Studio: (TS) Cannot find name '$'.
. How can I use jQuery with TypeScript ?
This question is related to
typescript
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"
]
}
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.
This works for me:
export var jQuery: any = window["jQuery"];
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
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.
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;
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 !!!
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
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 ...
This work for me now and today at Angular version 9
You can declare globals by augmenting the window interface:
import jQuery from '@types/jquery';
declare global {
interface Window {
jQuery: typeof jQuery;
$: typeof jQuery;
}
}
Sources:
Source: Stackoverflow.com