web-dev-qa-db-fra.com

Comment utiliser jQuery avec TypeScript

J'essaie 

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

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

typescript
95
JavaScript Linq

FOR Code Visual Studio

Ce qui me convient, c’est de veiller à charger la bibliothèque standard JQuery via le tag <script> dans le fichier index.html.

Courir

npm install --save @types/jquery

Maintenant, les fonctions JQuery $ sont disponibles dans tous les fichiers .ts, plus besoin d’importations. 

21
Sydwell

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

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

La commande de la console Nuget Package Manager est 

Install-Package jquery.TypeScript.DefinitelyTyped

Mise à jour: Comme indiqué dans le commentaire, ce paquet n'a pas été mis à jour depuis 2016. Mais vous pouvez toujours visiter leur page Github à https://github.com/DefinitelyTyped/DefinitelyTyped et télécharger les types. Naviguez dans le dossier de votre bibliothèque, puis téléchargez le fichier index.d.ts. Déposez-le n'importe où dans le répertoire de votre projet et VS l'utilisera immédiatement.

19
Licht

Dans mon cas je devais le faire

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 ...
10
Shobi

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

Pour P.

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

Cela fonctionne également très bien avec les bibliothèques tierces, si leur typage est installé.

7
Subroto

Pour Angular CLI 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"
        ]
...

Allez à 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"
]
}
3
The One

Cela fonctionne pour moi:

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

Voici mes étapes de configuration TypeScript et jQuery.

Cela rend le support des types de jQuery plus efficace que la plupart des articles sur Internet . ( Je crois. )

premier:

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




seconde (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 et lisse !!!

0
Lancer.Yan

Si vous souhaitez utiliser jquery dans une Webaplication (React, par exemple) et que jquery est déjà chargé avec le script src = "jquery-3.3.1.js" ... sur la page Web, vous pouvez effectuer les tâches suivantes:

npm install -save-dev @ types/query et l’utiliser avec: let $: JQueryStatic = (la fenêtre n’importe laquelle) ["jQuery"];

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

0
Gerhard Friedrich