How can I use jQuery from TypeScript with VS2017

Question

NOTE: this is a question about Visual Studio 2017. Answers or advice relating to earlier versions are likely to be unhelpful. Thanks.

---

I'm utterly at my wit's end. I've been trying to get a simple Visual Studio 2017 web project to work using TypeScript (v2.3), and it's so stupidly frustrating that it has left me exhausted and enraged. I truly doubt that anyone has ever accomplished this feat without abandoning the Visual Studio tooling and setting everything up outside/alongside VS.

My first problem is that there are various resources on the web that suggest different ways to do this, and they all conflict: "use Gulp", "no, use Bower", "use NPM", "no, use WebPack". And of course much of the advice to be found relates to earlier versions of Visual Studio.

Similarly, the TypeScript syntax for importing modules seems to change with every version, so much of that advice is also out-of-date, and further depends on which module loader, etc. you're using.

Lots of options is "great", but the tooling must be at least slightly opinionated, and I can't figure out what the path of least resistance is. I'd like to stick with the stuff that MS have actually integrated with VS, since I'm really not a fan of command lines and config files when the commands and config formats change weekly.

I followed the steps in the TypeScript handbook to create a web project that does little more than say "hello world", but stopped just before the section "Add Angular 2". (I don't want to use Angular, or at least not yet).

So, by this point I've got some NuGet dependencies, some NPM dependencies, and package.json, tsconfig.json, and gulpfile.json files.

What I want to do now is add jQuery to my project, and be able to say (in my TypeScript file):

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

So, I obviously need the jQuery library, and I need typescript definitions for jQuery. That should not be hard - but I, a developer of some 30 years standing, cannot figure out how to add those things using the new tooling.

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 corresponding typescript definitions.

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

In yet another "tutorial" I found (this one using Bower just to make sure it was a little more confusing), it was suggested to add the following to the tsconfig.json file to enable automatic type aquisition for TypeScript, which sounds great:

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

But sadly that doesn't seem to work. Or at least, not with the setup I currently have. [While it did provide Intellisense within the IDE when I followed the steps in that other tutorial, I was never actually able to get the project to compile.]

So, here I am, begging for help. How can I get my one-line piece of TypeScript to (a) recognize the JQuery type definitions, and (b) actually compile and run?

Better yet, if anyone knows of any online resources that actually explain all this for the current version of all the tools then I'd love to see that. Otherwise I may just go back to VS2015.

Answer 1

I had difficults with adding typing support to VS2017 but it looks like 15.4 update fix 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*/
  }
}

Than you should setup your 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 does not require to set up module bundler such as webpack for example. In types we should specify jquery which we specified early in package.json. Also we should specify "dom", "es5", "scripthost", "es2015.iterable" in lib because @types/jquery require it. outFile tell ts where to place compiled js file. So after that you can just add reference to it in your page.

After that jquery types start working in ts file without any further set up. Sometimes tsconfig.json file changes does not apply on fly. So make changes, download npm modules (rebuild solution for example) and then restart VS.