[Updated on 16th July 2019] I'm feeling perplexed at the moment. I am diving into a .NET Core 3.x Web Application and my aim is to incorporate:
- jQuery
- TypeScript
I've managed to get TypeScript up and running, but I'm facing an issue where it doesn't seem to recognize the jQuery '$' symbol.
Even after adding the 'DefinitelyTyped' libraries through NuGet, I still can't seem to resolve this problem.
The confusion stems from how I should be integrating these client-side libraries. I tried adding a Client-Side Library (via right-clicking on the solution) which updates the libman.json file. There's also an option of using package.json (which I believe is related to Node).
What I'm really keen on understanding is the best practice for Visual Studio 2019.
As for the specific difficulty that I find myself in...
Under Dependencies, here's what I have:
npn
- del
- gulp
- jquery
- jquery-ui
NuGet
- jquery.TypeScript.DefinitelyTyped
- jqueryui.TypeScript.DefinitelyTyped Microsoft
- Microsoft.TypeScript.MSBuild
Furthermore, under Scripts I have example.ts
var example = {
showGreeting: function(): void {
alert("Hello user");
let x: any = $('abc');
}
};
example.showGreeting();
(the issue arises with the '$' sign not being 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": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8dcc6dbc6d9">[email protected]</a>",
"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 made changes by transferring the client-side libraries from the Dependencies section in package.json to the libraries section in libman.json. They now don't appear under Solution's "npm" dependencies but instead are located under wwwroot/lib.
libman.json
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"provider": "unpkg",
"library": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0f1508150a">[email protected]</a>",
"destination": "wwwroot/lib/bootstrap/"
},
{
"library": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb918a8e9e8982bbc8d5cfd5ca">[email protected]</a>",
"destination": "wwwroot/lib/jquery/"
},
{
"library": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="462c373323343f332f06776877746877">[email protected]</a>",
"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"
}
}
This seems like a step towards the right direction. However, I'm still encountering the error with TypeScript:
error TS2581: Build:Cannot find name '$'. Do you need to install type definitions for jQuery?