Verwenden Sie Jquery in Aurelia mit Typoskript

Question

Ich benutze Aurelia mit Typoskript, mit aurelia-CLI und npm als Build-System und Client-Seite Paket-Manager. Mein Ziel ist es jquery innerhalb einer meiner .ts-Dateien zu verwenden, so habe ich jquery durch

npm install jquery@2.2.4 --save 

und nachdem es für Typisierungen habe ich hinzugefügt:

typings install dt~jquery --global --save 

ich auch so konfiguriert aurelia.json Datei mit "jquery" als Lieferantenbündelabhängigkeit.

Verwendung:

import * as jq from 'jquery'; 

aber das Projekt scheiterte mit den folgenden Fehler zu bauen:

Starting 'readProjectConfiguration'... Finished 'readProjectConfiguration' Starting 'processMarkup'... Starting 'processCSS'... Starting 'configureEnvironment'... Finished 'processCSS' Finished 'processMarkup' Finished 'configureEnvironment' Starting 'buildTypeScript'... typings/globals/jquery/index.d.ts(3218,13): error TS2403: Subsequent variable declarations must have the same type. Variable '$' must be of type 'cssSelectorHelper', but here has type 'JQueryStatic'. [17:45:00] gulp-notify: [Error running Gulp] Error: typings/globals/jquery/index.d.ts(3218,13): error TS2403: Subsequent variable declarations must have the same type. Variable '$' must be of type 'cssSelectorHelper', but here has type 'JQueryStatic'.

so was mit meinem Code falsch?

Answer 1

Nur müssen die jquery d.ts Modul Erklärung ändern:

declare module "jquery" { 
    export var $:JQueryStatic; 
    export var jquery:JQueryStatic 
} 

Answer 2

Dies ist ein bekanntes Problem und wird durch einen Zusammenstoß zwischen jQuery und Protractor Typdefinitionen verursacht.

Siehe here und here.

Beide deklarieren '$' als global. Der Winkelmesser verwendet $ ('css') als Shortcut-Selektor, der einen Konflikt mit jQuery verursacht.

Es gibt einige Problemumgehungen - die ersten beiden sind die Deklarationen für entweder Winkelmesser oder jQuery umzubenennen (was die ersten beiden Antworten hier für jQuery tun). Wenn Sie jQuery lieber mit '$' belassen möchten, benennen Sie den Winkelmesser global um. Sie finden die Deklaration in your-project-directory\typings\globals\angular-protractor\index.d.ts (nun, das ist der Ort in meinem Aurelia + Schluck/Jspm Projekt). Suchen Sie nach der Zeile declare var $: cssSelectorHelper; und bearbeiten oder kommentieren Sie sie vollständig.

Wenn Sie den Winkelmesser nicht verwenden möchten, entfernen Sie ihn aus Ihrem Projekt.

Wenn Sie Winkelmesser und jQuery benötigen, dann versuchen Sie, die Winkelmesser-Typen zu deinstallieren (und entfernen Sie so die globale Erklärung des Winkelmessers) - see this article at aureliajsrocks.com. Dieser Artikel weist auch darauf hin, dass dies nur ein Transpiler Fehler:

Although Protractor declares a $ variable that conflicts with jQuery, you don’t actually load Protractor into memory when running your app. So there is no conflict with jQuery during runtime.

The problem occurs because the Protractor TypeScript definition file is global and is loaded by the transpiler even if the actual .js library itself isn’t being loaded....

Wenn Sie jQuery haben und Protactor Tests dann jetzt das sieht aus wie die beste Lösung laufen, hoffentlich wird dies gelöst bekommen oder wenn jemand eine hat bessere Lösung dann bitte teilen ...