Visual Studio 2019 - correct way to add client libraries (TypeScript, JQuery etc)

Question

[Edited #1 on 16th Jul 2019] I'm confused. I'm experimenting with a .NET Core 3.x Web Application in which I want to use:

• jQuery
• TypeScript

I've got TypeScript working, but it refuses to understand the jQuery '$' symbol.

I've added the 'DefinitelyTyped' libraries via NuGet, but with no joy.

I think my confusion lies in how I SHOULD be adding these client side libraries. I have tried by adding a Client Side Library (via right-click on solution) and this goes in the libman.json file. There's also a way to use package.json (which I think is node).

What I really want to understand is what is the preferred way for Visual Studio 2019.

Regarding the specific problem (which I could really do with some 'novice' guidance on)....

Under Dependencies, I now have:

npn

• del
• gulp
• jquery
• jquery-ui

NuGet

• jquery.TypeScript.DefinitelyTyped
• jqueryui.TypeScript.DefinitelyTyped Microsoft
• Microsoft.TypeScript.MSBuild

Then, under Scripts I have example.ts

var example = {
    showGreeting: function(): void {
        alert("Hello user");
        let x: any = $('abc');
    }
};

example.showGreeting();

(this is where the '$' sign is not recognized)

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "files": [
    "./example.ts"
  ],
  "compileOnSave": true
}

libman.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "unpkg",
      "library": "[email protected]",
      "destination": "wwwroot/lib/bootstrap/"
    }
  ]
}

package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "jquery": "3.4.1",
    "jquery-ui": "1.12.1"
  },
  "devDependencies": {
    "gulp": "4.0.2",
    "del": "5.0.0"
  }
}

EDIT #1

I removed the client side libraries from the package.json's Dependencies section and moved them to the libman.json's libraries section. They duly disappeared from under the Solution's "npm" dependencies and now appear under wwwroot/lib.

libman.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "unpkg",
      "library": "[email protected]",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/jqueryui/"
    }
  ]
}

package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "dependencies": {
  },
  "devDependencies": {
    "gulp": "4.0.2",
    "del": "5.0.0"
  }
}

I think that's a step in the right direction.

However, TypeScript is still giving me the error:

error TS2581: Build:Cannot find name '$'. Do you need to install type definitions for jQuery?

Idiopathy

I wouldnt use NuGet for the typescript definitions. Try using libman instead: #53537108 Libman is definitely the right way for client libraries. – Vapid

@Bluesight. My thought was that TypeScript is compiled on the Server (to generate the JavaScript) and as such the TypeScript definitions ought to be pulled by NuGet as it's not really "client" code at this stage. – Idiopathy

Mind you, the typescript definitions are "dev tools". I'll try adding them to the package.json section. – Idiopathy

Answer 1

Okay - got this working now. The following defines what I had to install.

NuGet

• Microsoft.TypeScript.MSBuild
• Microsoft.Web.LibraryManager.Build

Libman.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "unpkg",
      "library": "[email protected]",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/jquery/",
      "files": [
        "jquery.min.js",
        "jquery.min.map",
        "jquery.js",
        "core.js"
      ]
    }
  ]
}

package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "dependencies": {
  },
  "devDependencies": {
    "gulp": "4.0.2",
    "del": "5.0.0",
    "@types/jquery": "3.3.30",
    "@types/jqueryui": "1.12.7"
  }
}

Idiopathy