it-swarm.com.de

Wie importiere ich JQuery in eine TypeScript-Datei?

Aktualisieren

Es war kein Import erforderlich. Stattdessen musste ich einen Verweis zum Anfang der Datei hinzufügen. Die erste Zeile meiner WebAPI.js sollte also /// <reference path ="../typings/jquery/jquery.d.ts"/> anstelle von import { $ } from '../jquery-3.1.1'; lauten.


Ich versuche, jQuery zur Verwendung in einer TypeScript-Datei zu importieren, erhalte jedoch bei allen Versuchen eine Reihe von Fehlern. Ich folgte den Lösungen hier und hier , aber ohne Glück.

tsconfig.json

{
    "compilerOptions": {
        "removeComments": true,
        "preserveConstEnums": true,
    "out": "Scripts/CCSEQ.Library.js",
    "module": "AMD",
        "sourceMap": true,
    "target": "es5",
    "allowJs": true
}

WebAPI.js

import { $ } from '../jquery-3.1.1';

export class ExpenseTransaction extends APIBase {

    constructor() {
        super();
    }

    Get(): void {
        let expenses: Array<Model.ExpenseTransaction>;
        let self = this;
        $.ajax({
            url: this.Connection,
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            success: function (data: any): void {
                expenses = self.ConvertToEntity(data.value);
            },
            error: function (data: any): void { console.log(data.status); }
        });
    };
}

Ich habe auch versucht, import * as $ from '../jquery.3.1.1'

Fehler

  • Module jquery-3.1.1 has no exported member $
  • Property ajax does not exist on type (selector: any, context: any) => any
20
Tim Hutchison

Ein Import ist nicht erforderlich. Fügen Sie stattdessen einen Verweis auf die TypeScript-Definitionsdatei am Anfang der Datei hinzu. Die erste Zeile des WebAPI.js sollte also sein 

/// <reference path ="../typings/jquery/jquery.d.ts"/> 

anstatt 

import { $ } from '../jquery-3.1.1';

Laut dem DefinitelyTyped Wiki:

Eine TypeScript-Deklarationsdatei dient zur Definition der Typen und Funktionen und Parameter in einer externen JavaScript-Bibliothek eines Drittanbieters. Durch die Nutzung Eine Deklarationsdatei in Ihrem TypeScript-Code aktiviert Intellisense und geben Sie die Überprüfung anhand der verwendeten externen Bibliothek ein.

jquery.d.ts ist Teil der DefinitelyTyped Library auf GitHub. Definitiv Typed kann über den NuGet Package Manager in Visual Studio-Projekte eingebunden werden.

14
Tim Hutchison

Sie müssen es als import * as $ from "jquery"; importieren, gemäß der TypeScript-Dokumentation documentation und jquery's Definitionsdatei ist das Modul als Umgebungsmodul definiert:

declare module "jquery" {
    export = $;
}

Nach this :

Umgebungsdeklarationen sind ein Versprechen, das Sie mit dem Compiler machen. Wenn diese zur Laufzeit nicht vorhanden sind und Sie versuchen, sie zu verwenden, werden die Dinge ohne Warnung abgebrochen.

Ich hoffe es hilft!

25
Marco Maldonado

mache das: nachdem du jquery mit npm installiert oder mit cdn benutzt hast

zuerst:  

npm install @types/jquery --save-dev

und danach:

import * als $ from 'jquery';

3
zahafyou

Tims Lösung unter Verwendung der Referenz-Compiler-Direktive funktioniert, es gibt jedoch jetzt einen einfacheren Weg.

Wenn Sie in tsconfig.json typeRoots festlegen, müssen Sie in Ihren .ts-Dateien überhaupt nichts tun. TypeScript erledigt die Arbeit für Sie.

Wie funktioniert es?

In meiner Lösung ziehe ich alle meine @types über npm ein, sodass diese unter ./node_modules/@types abgelegt werden. Ich habe auch ein paar Typen, die ich unter ./@types von Hand erstellt habe. 

In meiner tsconfig.json habe ich hinzugefügt:

 "compilerOptions": {     
   // lots of other config here
   "typeRoots": [
     "./node_modules/@types",
     "./@types"
   ]
  }

Jetzt werden alle meine Typen automatisch vom Compiler erkannt und verwendet, sodass Sie sich nicht mit Referenz-Tags befassen müssen!

Abschließend...

Wenn Sie dies tun und versuchen, Jquery explizit zu importieren, schlägt dies fehl und Sie werden verwirrt. Ich war mir sicher.

1
Brian MacKay

Versuchen Sie, Ihren Import durch .__ zu ersetzen.

0
Anshu Bansal