Wie kann ich bei Verwendung von Typescript die Syntaxfehler "Eigenschaft existiert nicht für Typ JQuery" stoppen?

80

Ich verwende in meiner Anwendung nur eine Zeile von jQuery:

$("div.printArea").printArea();

Dies gibt mir jedoch einen Typoskript-Fehler:

Die Eigenschaft 'printArea' ist für den Typ JQuery? Nicht vorhanden.

Kann mir jemand sagen, wie ich verhindern kann, dass dieser Fehler auftritt?

jquery typescript Alan2
quelle

Antworten:

187

Sie können es in <any>die jquery-Eingabe umwandeln oder erweitern, um Ihre eigene Methode hinzuzufügen.

 (<any>$("div.printArea")).printArea();

// Oder fügen Sie Ihre eigenen benutzerdefinierten Methoden hinzu (vorausgesetzt, diese werden von Ihnen als Teil des benutzerdefinierten Plugins hinzugefügt) 

interface JQuery {
    printArea():void;
}
PSL
quelle
Geben Sie mir:Error:(44, 23) TS2339: Property 'printArea' does not exist on type 'ElementFinder'.
Benutzer47376
Wenn Sie den interface JQueryWeg in einem externen Modul versuchen und einen Funktionsparameter als JQuery-Typ definieren und versuchen, ihn aus einer anderen Datei aufzurufen, beschwert sich TypeScript, dass es zwei Typen mit dem Namen JQuery gibt, die nicht miteinander zusammenhängen.
Sam Rueby
Das Deklarieren der Benutzeroberfläche scheint großartig zu funktionieren. Auch seine viel sauberer als Gießen <alle> überall
Decoded
43

Ich denke, dies ist die am besten lesbare Lösung:

($("div.printArea") as any).printArea();
Eldamir
quelle
11

Sie können es besetzen 

(<any>$('.selector') ).function();

Beispiel: Datumsauswahl wird mit jquery initialisiert

(<any>$('.datepicker') ).datepicker();
vishnu
quelle
3

Für Ihr Beispiel würden Sie Folgendes hinzufügen:

interface JQuery{
    printArea():void;
}

Edit: oops, basarat ist unten korrekt. Ich bin nicht sicher, warum ich dachte, es würde kompiliert, aber ich habe diese Antwort aktualisiert.

AlexB
quelle
Nee. Er umhüllt ein Objekt mit $. Es ist nicht mehr statisch $
Basarat
Hmm, bist du sicher? Ich habe das in einem Projekt getestet und es hat funktioniert.
AlexB
Jep. Ihr Fall $.inviewport(el)Ops Fall$('selector').printArea
Basarat
Entschuldigung, ich will nicht streiten, aber mein Code funktioniert für mich. Die Frage scheint darin zu bestehen, den Code zum Kompilieren zu bringen. Wenn mein Code kompiliert wird, was ist das Problem damit? Beachten Sie, dass mein zweites Beispiel mit printArea () ebenfalls funktioniert.
AlexB
$('selector').printAreakompiliert? Das glaube ich nicht. $.printAreawird aber kompilieren. Sie waren sehr höflich, also keine Beleidigung genommen oder beabsichtigt :)
Basarat
2

Da printArea ein jQuery-Plugin ist, ist es nicht in jquery.d.ts enthalten.

Sie müssen eine Definitionsdatei jquery.printArea.ts erstellen.

Wenn Sie eine vollständige Definitionsdatei für das Plugin erstellen, möchten Sie diese möglicherweise an DefinitelyTyped senden .

Albin Sunnanbo
quelle
Und stellen Sie sicher, dass Ihre tsconfig.json auch richtig eingerichtet ist. Wenn die Einstellung "Typen" vorhanden ist, werden nur die aufgelisteten Typen erkannt. Wenn nicht, dann erkennt es alles in node_modules / @ types
Dan Cancro
2

Sie können auch die Ignoriersyntax verwenden, anstatt die Notation (wie besser 'wie jede andere') zu verwenden:

// @ts-ignore
$("div.printArea").printArea();
Guntram
quelle
1

Sie können es auch so schreiben:

let elem: any;
elem = $("div.printArea");
elem.printArea();
iqqmuT
quelle