JQuery gebruiken met TypeScript

Ik probeer

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

Het toont deze fout in Visual Studio: (TS) Cannot find name '$'.. Hoe kan ik jQuery gebruiken met TypeScript?

Antwoord 1, autoriteit 100%

Hoogstwaarschijnlijk moet u het TypeScript-declaratiebestandvoor jQuery downloaden en opnemen—jquery.d.ts—in uw project.

Optie 1: installeer het @types-pakket (aanbevolen voor TS 2.0+)

Voer de volgende opdracht uit in dezelfde map als uw bestand package.json:

npm install --save-dev @types/jquery

Dan zal de compiler de definities voor jQuery automatisch oplossen.

Optie 2: handmatig downloaden (niet aanbevolen)

Download het hier.

Optie 3: Typen gebruiken (Pre TS 2.0)

Als u typingsgebruikt, kunt u dit op deze manier opnemen:

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

Importeer na het instellen van het definitiebestand de alias ($) in het gewenste TypeScript-bestand om het te gebruiken zoals u dat normaal zou doen.

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

Mogelijk moet u compileren met --allowSyntheticDefaultImports—voeg "allowSyntheticDefaultImports": truetoe in tsconfig.json.

Ook het pakket installeren?

Als je jQuery niet hebt geïnstalleerd, wil je het waarschijnlijk als een afhankelijkheid installeren via npm (maar dit is niet altijd het geval):

npm install --save jquery

Antwoord 2, autoriteit 15%

In mijn geval moest ik dit doen

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

Vervolgens in het scriptbestand A.ts

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

Antwoord 3, autoriteit 12%

VOOR Visual Studio-code

Wat voor mij werkt, is ervoor te zorgen dat ik de standaard JQuery-bibliotheek laad via een < script >tag in de index.html.

Rennen

npm install --save @types/jquery

Nu zijn de JQuery $-functies beschikbaar in alle .ts-bestanden, geen andere import nodig.

Antwoord 4, autoriteit 11%

Voor Angular CLI V7

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

Zorg ervoor dat jQuery een vermelding heeft in angular.json -> scripts

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

Ga naar tsconfig.app.json en voeg een item toe in “types”

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

Antwoord 5, autoriteit 9%

Ik denk dat je de Typescript-typeringen voor JQuery nodig hebt. Aangezien je zei dat je Visual Studio gebruikt, zou je Nuget kunnen gebruiken om ze te krijgen.

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

De opdracht in de Nuget Package Manager-console is

Install-Package jquery.TypeScript.DefinitelyTyped

Update:Zoals opgemerkt in de opmerking, is dit pakket sinds 2016 niet meer bijgewerkt. Maar je kunt nog steeds hun Github-pagina bezoeken op https://github.com/DefinitelyTyped/DefinitelyTypeden download de typen. Navigeer door de map voor uw bibliotheek en download daar het bestand index.d.ts. Zet het overal in je projectmap en VS zou het meteen moeten gebruiken.

6, Autoriteit 3%

Als u JQuery in een webapplicatie wilt gebruiken (bijv. Reageer) en jQuery is al geladen met <script src="jquery-3.3.1.js"...

Op de webpagina die u kunt doen:

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

Dus u hoeft jQuery een tweede keer niet te laden (met npm install --save jquery)
maar hebben alle voordelen van typcript

7, Autoriteit 2%

Hier is mijn typescript & amp; jQuery config stappen.

Het maakt de typen van JQuery ondersteunen bij Beter dan de meeste artikelen op internet . (Ik geloof.)

eerst:

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

tweede (heel erg belangrijk!!!):

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

Dan kunt u ervan genieten:

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

Het is zijdezacht !!!

Antwoord 8

Dit werkt voor mij nu en vandaag bij Angular-versie 9

1. Installeer via npm dit: npm i @types/jquery voeg gewoon –save toe om globaal in te stellen.
2. Ga naar tsconfig.app.json en voeg in de array “types” jquery toe.
3. dienen en klaar.

Antwoord 9

U kunt globals declareren door de vensterinterface uit te breiden:

import jQuery from '@types/jquery';
declare global {
    interface Window {
        jQuery: typeof jQuery;
        $: typeof jQuery;
    }
}

Bronnen:

• https://stackoverflow.com/a/12709880/4642023
• https://mariusschulz.com /blog/declaring-global-variables-in-typescript#augmenting-the-window-interface

Antwoord 10

Dit werkt voor mij:

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

Antwoord 11

Na installatie van jQuery en @types/jquery (als dev-afhankelijkheid), gebruik deze import:

import * as $ from "jquery";

In mijn geval was alleen deze manier nuttig.
(hoekig9)