How to use jQuery with TypeScript

by

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

More Related Contents:

  1. How to define Typescript type as a dictionary of strings but with one numeric “id” property
  2. Could not find a declaration file for module ‘module-name’. ‘/path/to/module-name.js’ implicitly has an ‘any’ type
  3. How to suppress “error TS2533: Object is possibly ‘null’ or ‘undefined'”?
  4. Why does A | B allow a combination of both, and how can I prevent it?
  5. TypeScript conditional types – filter out readonly properties / pick only required properties
  6. Typescript Discriminated Union allows invalid state
  7. Why can’t I return a generic ‘T’ to satisfy a Partial?
  8. Define global constants
  9. How to use moment.js library in angular 2 typescript app?
  10. Chaining RxJS Observables from http data in Angular2 with TypeScript
  11. How can I declare a global variable in Angular 2 / Typescript? [closed]
  12. Safe navigation operator (?.) or (!.) and null property paths
  13. How to test if two types are exactly the same
  14. Angular2 – Http POST request parameters
  15. How do I check that a switch block is exhaustive in TypeScript?
  16. How to ‘map’ a Tuple to another Tuple type in Typescript 3.0
  17. Angular 2 2.0.0-rc.1 Property ‘map’ does not exist on type ‘Observable’ not the same as issue report
  18. What is target in tsconfig.json for?
  19. ES7 Object.entries() in TypeScript not working
  20. Extend (Update) third-party old type declaration interface with new one
  21. Why do subtypes need to be assigned to a variable before being used as a function argument?
  22. Typescript narrowing of keys in objects when passed to function
  23. Typescript type T or function () => T usage
  24. Flatten object with custom keys in Typescript
  25. TypeScript export imported interface
  26. How to create an Observable from static data similar to http one in Angular?
  27. Setting up tsconfig with spec/test folder
  28. How to pass an instance variable into typescript decorator arguments?
  29. Can I force the TypeScript compiler to use nominal typing?
  30. Optional class members in Typescript

Leave a Comment