Comment utiliser jQuery avec TypeScript

j'essaie

$(function(){ 
    alert('Hello'); 
});

Son montrant cette erreur dans Visual Studio: (TS) Cannot find name '$'.. Comment puis-je utiliser jQuery avec TypeScript?

Vous devrez probablement télécharger et inclure le fichier de déclaration TypeScript pour jQuery jquery.d.ts- dans votre projet.

Option 1: installer le package @types (recommandé pour TS 2.0+)

Dans le même dossier que votre fichier package.json , exécutez la commande suivante:

npm install --save-dev @types/jquery

Ensuite, le compilateur résoudra automatiquement les définitions de jquery.

Option 2: télécharger manuellement (non recommandé)

Téléchargez-le ici .

Option 3: Utilisation des typages (pré TS 2.0)

Si vous utilisez des typages, vous pouvez l'inclure de cette façon:

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

Après avoir configuré le fichier de définition, importez l'alias ( $) dans le fichier TypeScript souhaité pour l'utiliser comme vous le feriez normalement.

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

Vous devrez peut-être compiler avec --allowSyntheticDefaultImports—add "allowSyntheticDefaultImports": truedans tsconfig.json .

Installer également le package?

Si vous n'avez pas installé jquery, vous voudrez probablement l'installer en tant que dépendance via npm (mais ce n'est pas toujours le cas):

npm install --save jquery

Dans mon cas, je devais faire ça

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

Puis dans le fichier script A.ts

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

POUR Visual Studio Code

Ce qui fonctionne pour moi, c'est de m'assurer de faire le chargement de la bibliothèque JQuery standard via une balise <script> dans l'index.html.

Courir

npm install --save @types/jquery

Maintenant, les fonctions JQuery $ sont disponibles dans tous les fichiers .ts, pas besoin d'autres importations.

Je pense que vous aurez peut-être besoin des typages Typescript pour JQuery. Puisque vous avez dit que vous utilisez Visual Studio, vous pouvez utiliser Nuget pour les obtenir.

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

La commande de la console Nuget Package Manager est

Install-Package jquery.TypeScript.DefinitelyTyped

Mise à jour: comme indiqué dans le commentaire, ce package n'a pas été mis à jour depuis 2016. Mais vous pouvez toujours visiter leur page Github à https://github.com/DefinatelyTyped/DefinatelyTyped et télécharger les types. Naviguez dans le dossier de votre bibliothèque, puis téléchargez le index.d.tsfichier là-bas. Placez-le n'importe où dans le répertoire de votre projet et VS devrait l'utiliser tout de suite.

Pour CLI angulaire V7

npm install jquery --save
npm install @types/jquery --save

Assurez-vous que jquery a une entrée dans angular.json -> scripts

...
    "scripts": [
        "node_modules/jquery/dist/jquery.min.js"
    ]
...

Accédez à tsconfig.app.json et ajoutez une entrée dans "types"

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

MISE À JOUR 2019:

La réponse de David est plus précise.

Typescript prend en charge les bibliothèques de fournisseurs tiers, qui n'utilisent pas Typescript pour le développement de bibliothèques, à l'aide du Repo DefinitelyTyped .

Vous devez déclarer jquery/ $dans votre composant, si tsLint est activé pour ces types de vérifications de type.

Pour par ex.

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

Si vous souhaitez utiliser jquery dans une application Web (par exemple React) et que jquery est déjà chargé avec <script src="jquery-3.3.1.js"...

Sur la page Web, vous pouvez faire:

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

donc, vous n'avez pas besoin de charger jquery une seconde fois (avec npm install --save jquery) mais bénéficiez de tous les avantages de Typescript

Voici mes étapes de configuration TypeScript & jQuery.

Cela permet aux types de jQuery de fonctionner mieux que la plupart des articles sur Internet . ( Je crois. )

première:

npm install jquery --save
npm install @types/jquery --save-dev

deuxième (très très très important!!!):

import jquery = require("jquery");



// this helps TypeScript to understand jQuery best !!!  otherwise It will confused .
const $: JQueryStatic = jquery;

alors, vous pouvez en profiter:

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

C'est soyeux !!!

Ce travail pour moi maintenant et aujourd'hui à Angular version 9

1. Installez via npm ceci: npm i @ types / jquery ajoutez simplement --save à la configuration globale.
2. Accédez à tsconfig.app.json et ajoutez dans le tableau "types" jquery.
3. ng servir et fait.

Cela fonctionne pour moi:

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