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

User · Answer

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

User · Answer

This works for me   export var jQuery  any   window  jQuery

User · Answer

This work for me now and today at Angular version 9  Install via npm this  npm i  types jquery just add --save to setup globally  Go to tsconfig app json and add in the array  quot types quot  jquery   ng serve and done

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Here is my TypeScript  amp  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

User · Answer

FOR Visual Studio Code  What works for me is to make sure I do the standard JQuery library loading via a  lt  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

User · Answer

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

[typescript] How to use jQuery with TypeScript

Examples related to typescript