Jak używać jQuery z TypeScript z VS2017

Question

UWAGA: to jest pytanie dotyczące Visual Studio . Odpowiedzi lub porady dotyczące wcześniejszych wersji mogą być pomocne pod adresem un. Dzięki.

---

Jestem całkowicie na końcu mojego dowcipu. Próbowałem uzyskać prosty projekt internetowy Visual Studio 2017 do pracy przy użyciu TypeScript (v2.3), a to jest tak głupio frustrujące, że zostawiło mnie wyczerpanym i wściekłym. Naprawdę wątpię, czy ktoś kiedykolwiek dokonał tego wyczynu bez porzucania narzędzi Visual Studio i ustawiania wszystkiego na zewnątrz/obok VS.

Moim pierwszym problemem jest to, że w sieci dostępne są różne zasoby, które sugerują różne sposoby na zrobienie tego, a wszystkie one są w konflikcie: "używaj Gulp", "nie, użyj Bower", "użyj NPM", "nie, użyj WebPack ". I oczywiście wiele rad, które można znaleźć, dotyczy wcześniejszych wersji Visual Studio.

Podobnie wydaje się, że składnia TypeScript do importowania modułów zmienia się wraz z każdą wersją, tak wiele z , że porady są również nieaktualne, a ponadto zależy od tego, który moduł ładujący itp. Używasz.

Wiele opcji jest "wspaniałych", ale oprzyrządowanie musi być co najmniej lekko nachylone i nie mogę określić, jaka jest ścieżka najmniejszego oporu. Chciałbym pozostać przy tym, co MS faktycznie zintegrowało z VS, ponieważ tak naprawdę nie jestem fanem linii poleceń i plików konfiguracyjnych, gdy formaty poleceń i konfiguracji zmieniają się co tydzień.

Połączyłem się z the steps in the TypeScript handbook, aby utworzyć projekt internetowy, który nie ogranicza się do powiedzenia "Witaj świecie", ale zatrzymał się tuż przed sekcją "Dodaj kąt 2". (Nie chcę używać Angulara, a przynajmniej jeszcze nie).

Więc przez ten punkt Mam kilka Nuget zależności, niektóre NPM zależności, a package.json, tsconfig.json i gulpfile.json plików.

co chcę teraz zrobić, to dodać jQuery do mojego projektu, i móc powiedzieć (w moim pliku maszynopis):

let foo: JQuery = $("p"); 

Tak, oczywiście potrzebujemy biblioteki jQuery, i muszę definicje maszynopisu dla jQuery. To nie powinno być trudne - ale ja, deweloper, który ma około 30 lat, nie może dowiedzieć się, jak dodać te rzeczy za pomocą nowego narzędzia.

Próbowałem dodając „jquery” jako zależność w pliku package.json NPM:

"dependencies": { 
    "jquery": "^3.2.1" 
}, 

... ale nie mogę dowiedzieć się, jak dodać odpowiednie definicje maszynopisu.

Instrukcja maszynopis sugeruje użycie npm import @types/jquery ale nie mam linię poleceń KMP, a gdy próbowałem dodać, że bezpośrednio z zależnościami (lub devDependencies) sekcji w package.json pliku , że nie rozpoznał to.

W jeszcze innym „tutorial” Znalazłem (w tym jeden przy użyciu Bower tylko upewnić się, że to trochę bardziej skomplikowane), sugerowano, aby dodać następujące do tsconfig.json pliku, aby włączyć automatyczne typu akwizycji dla maszynopis, który brzmi wielkie:

"typeAcquisition": { 
    "enable": true 
}, 

Ale niestety to nie wydają się działać. A przynajmniej nie z ustawieniem, które obecnie mam. [Mimo że zapewniłem IntelliSense w ramach IDE, gdy postępowałem zgodnie z instrukcjami w tym samouczku, nigdy nie byłem w stanie zmusić projektu do kompilacji.]

Tak, oto jestem, błagając o pomoc. Jak mogę uzyskać jednoliniowy fragment języka TypeScript do (a) rozpoznawania definicji typu JQuery, a (b) do kompilacji i uruchamiania?

Jeszcze lepiej, jeśli ktokolwiek wie o jakichkolwiek zasobach online, które faktycznie tłumaczą to wszystko dla aktualnej wersji wszystkich narzędzi, to chciałbym to zobaczyć. W przeciwnym razie mogę po prostu wrócić do VS2015.

Answer 1

Miałem problemy z dodaniem obsługi typowania do VS2017, ale wygląda na to, że aktualizacja 15.4 naprawia moje problemy. Przede wszystkim należy dodać @types/jquery devDependencies do pliku package.json. Na przykład:

{ 
    "name": "asp.net", 
    "version": "0.0.0", 

    "dependencies": { 
    "jquery": "3.1.1", 
    /*other packages*/ 
    }, 

    "devDependencies": { 
    "gulp": "3.8.11",   
    "@types/jquery": "2.0.47" 
    /*other dev packages*/ 
    } 
} 

Następnie powinieneś skonfigurować swój plik tsconfig.json. Na przykład:

{ 
    "compilerOptions": { 
    "module": "none", 
    "noImplicitAny": true, 
    "noImplicitReturns": true, 
    "noEmitOnError": true, 
    "removeComments": true, 
    "sourceMap": true, 
    "types": [ 
     "jquery" 
    ], 
    "lib": [ 
     "dom", 
     "es5", 
     "scripthost", 
     "es2015.iterable" 
    ], 
    "target": "es5", 
    //"outDir": "wwwroot/app-out" 
    "outFile": "wwwroot/app-out/app.js" 
    }, 
    "compileOnSave": true, 
    "exclude": [ 
    "node_modules", 
    "wwwroot" 
    ] 
} 

Tak ustawić module do none więc nie wymaga konfigurowania modułu Bundler takich jak WebPack na przykład. W typach powinniśmy podać jquery, które określiliśmy na początku w package.json. Również powinniśmy określić "dom", "es5", "scripthost", "es2015.iterable" w lib, ponieważ wymaga tego @types/jquery. outFile powiedz ts gdzie umieścić skompilowany plik js. Więc po prostu możesz dodać odniesienie do niego na swojej stronie.

Po tym typy jquery zaczynają pracować w pliku ts bez dalszej konfiguracji. Czasami zmiana pliku tsconfig.json nie ma zastosowania w locie. Dokonaj zmian, pobierz moduły npm (na przykład przebuduj rozwiązanie), a następnie uruchom ponownie VS.