How can I use jQuery from TypeScript with VS2017

Question

NOTE : this is a question about Visual Studio 2017 . Answers or recommendations related to earlier versions are most likely to be futile. Thanks.

---

I am completely out of my mind. I tried to create a simple Visual Studio 2017 web project using TypeScript (v2.3), and it is so stupid to upset that it left me exhausted and furious. I really doubt that anyone has ever accomplished this feat without abandoning Visual Studio tools and installing everything outside / next to VS.

My first problem is that there are various resources on the Internet that offer different ways to do this, and they all conflict: "use Gulp", "no, use Bower", "use NPM", "no", use WebPack " And, of course, most of the recommendations you need to find apply to earlier versions of Visual Studio.

Likewise, the TypeScript syntax for importing modules seems to change with each version, so many of these tips also become outdated and depend on which module the loader, etc. you are using.

The many options are "excellent", but the tool should be at least slightly stubborn, and I cannot figure out what the path of least resistance is. I would like to adhere to the fact that MS has actually integrated with VS, since I'm really not a fan of the command line and configuration files when commands and configuration formats change weekly.

I followed the steps in the TypeScript tutorial to create a web project that does nothing more than “hello world” but stops in front of the “Add Angular 2” section. (I don't want to use Angular, or at least not yet).

So, at this point, I have several NuGet dependencies, some NPM and package.json , tsconfig.json, and gulpfile.json dependencies .

Now I want to add jQuery to my project and be able to say (in my TypeScript file):

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

So, I explicitly need the jQuery library, and I need TypeScript definitions for jQuery. It doesn't have to be difficult - but I, a developer who takes about 30 years, cannot figure out how to add these things with the new tools.

I tried adding "jquery" as a dependency in the NPM package.json file:

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

... but I can't figure out how to add the appropriate TypeScript definitions.

The TypeScript manual suggests using npm import @types/jquery , but I don't have an NPM command line, and when I tried to add this directly to the dependencies section (or devDependencies) in the package.json file, it did not recognize it.

In yet another “tutorial” that I found (this one, using Bower to make sure this is a bit confusing), it was suggested adding the following to the tsconfig.json file to enable the automatic acquisition type for TypeScript, which sounds great:

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

But, unfortunately, this does not work. Or at least not with the setup that I now have. [Although he provided Intellisense in the IDE, when I followed the steps in this other tutorial, I could never get the project to compile.]

So here I am, begging for help. How can I get a single-line TypeScript fragment to (a) recognize JQuery type definitions and (b) compile and run it myself?

Even better, if anyone knows any online resources that really explain all this for the current version of all tools , then I would like to see it. Otherwise, I can just go back to VS2015.

Answer 1

It was hard for me to add input support for VS2017, but it seems like update 15.4 fixes my problems. First of all, you should add @types/jquery devDependencies to your package.json file. For example:

 { "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*/ } } 

Then you should configure the tsconfig.json file. For example:

 { "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" ] } 

So, I set module to none , so it is not necessary, for example, to configure a module, for example webpack. In types, we must specify the jquery that we specified at the beginning of package.json . We also need to specify "dom", "es5", "scripthost", "es2015.iterable" in lib , because @types/jquery requires it. outFile tell ts where to put the compiled js file. So after that you can simply add a link to it on your page.

After that, jquery types start working in the ts file without any additional configuration. Sometimes changes to the tsconfig.json file tsconfig.json not applied on the fly. So make the changes, load the npm modules (for example, rebuild the solution), and then restart VS.