Verwendung von jQuery mit TypeScript

ich versuche

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

Dieser Fehler wird in Visual Studio angezeigt : (TS) Cannot find name '$'.. Wie kann ich jQuery mit TypeScript verwenden?

Höchstwahrscheinlich müssen Sie die TypeScript-Deklarationsdatei für jQuery herunterladen und jquery.d.tsin Ihr Projekt aufnehmen.

Option 1: Installieren Sie das @ types-Paket (empfohlen für TS 2.0+)

Führen Sie im selben Ordner wie Ihre Datei package.json den folgenden Befehl aus:

npm install --save-dev @types/jquery

Dann löst der Compiler die Definitionen für jquery automatisch auf.

Option 2: Manuelles Herunterladen (nicht empfohlen)

Laden Sie es hier herunter .

Option 3: Verwenden von Typisierungen (Pre TS 2.0)

Wenn Sie Typisierungen verwenden , können Sie diese folgendermaßen einschließen:

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

Importieren Sie nach dem Einrichten der Definitionsdatei den Alias ​​( $) in die gewünschte TypeScript-Datei, um ihn wie gewohnt zu verwenden.

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

Möglicherweise müssen Sie mit --allowSyntheticDefaultImports--add "allowSyntheticDefaultImports": truein tsconfig.json kompilieren .

Paket auch installieren?

Wenn Sie jquery nicht installiert haben, möchten Sie es wahrscheinlich als Abhängigkeit über npm installieren (dies ist jedoch nicht immer der Fall):

npm install --save jquery

In meinem Fall musste ich das tun

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

Dann in der Skriptdatei A.ts

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

FÜR Visual Studio-Code

Was für mich funktioniert, ist sicherzustellen, dass ich die Standard-JQuery-Bibliothek über ein <Skript> lade -Tag in der index.html lade.

Lauf

npm install --save @types/jquery

Jetzt sind die JQuery $ -Funktionen in allen .ts-Dateien verfügbar, ohne dass weitere Importe erforderlich sind.

Ich glaube, Sie benötigen möglicherweise die Typescript-Typisierung für JQuery. Da Sie sagten, dass Sie Visual Studio verwenden, können Sie Nuget verwenden, um sie abzurufen.

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

Der Befehl in der Nuget Package Manager-Konsole lautet

Install-Package jquery.TypeScript.DefinitelyTyped

Update: Wie im Kommentar erwähnt, wurde dieses Paket seit 2016 nicht mehr aktualisiert. Sie können jedoch die Github-Seite unter https://github.com/DefinitelyTyped/DefinitelyTyped besuchen und die Typen herunterladen. Navigieren Sie durch den Ordner für Ihre Bibliothek und laden Sie die index.d.tsDatei dort herunter . Pop es irgendwo in Ihrem Projektverzeichnis und VS sollte es sofort verwenden.

Für Angular CLI V7

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

Stellen Sie sicher, dass jquery einen Eintrag in angle.json -> scripts hat

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

Gehen Sie zu tsconfig.app.json und fügen Sie einen Eintrag in "types" hinzu.

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

UPDATE 2019:

Antwort von David ist genauer.

Typescript unterstützt Bibliotheken von Drittanbietern, die Typescript nicht für die Bibliotheksentwicklung verwenden, unter Verwendung von DefinitelyTyped Repo .

Sie müssen jquery/ $in Ihrer Komponente deklarieren , wenn tsLint für diese Arten von Typprüfungen aktiviert ist.

Zum Beispiel.

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

Wenn Sie jquery in einer Webanwendung verwenden möchten (z. B. React) und jquery bereits mit geladen ist <script src="jquery-3.3.1.js"...

Auf der Webseite können Sie Folgendes tun:

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

Sie müssen jquery also nicht ein zweites Mal (mit npm install --save jquery) laden, sondern haben alle Vorteile von Typescript

Hier sind meine TypeScript & jQuery-Konfigurationsschritte.

Dadurch unterstützt die Unterstützung von jQuery-Typen besser als die meisten Artikel im Internet . ( Ich glaube. )

zuerst:

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

zweitens (sehr sehr sehr wichtig !!):

import jquery = require("jquery");



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

dann können Sie es genießen:

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

Es ist seidig glatt !!!

Diese Arbeit für mich jetzt und heute bei Angular Version 9

1. Installieren Sie über npm this: npm i @ types / jquery fügen Sie einfach --save hinzu, um es global einzurichten.
2. Gehen Sie zu tsconfig.app.json und fügen Sie im Array "types" jquery hinzu.
3. ng servieren und fertig.

Das funktioniert bei mir:

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