How to use libman instead of npm to download typescript definitions

Question

When I install typescript definitions using npm, I can use them in typescript files that are part of Visual Studio build:

1. Create new ASP.NET Core Web Application in Visual Studio
2. Add jQuery using libman
3. Add jQuery using npm install @types/jQuery
4. Create new typescript file: wwwroot/js/site.ts. This adds <TypeScriptCompile Include="wwwroot\js\site.ts" /> to .csproj.
5. I can now use $ global variable in my typescript files

However, when I use libman to download the typescript definitions, I have troubles configuring the typescript build to use them.

I guess I need to add tsconfig.json, but it seems to interfere with the TypeScriptCompile in the csproj.

wwwroot
  js
    site.d.ts
    site.ts
  lib
    jquery
       jquery.min.js
    @types
       jquery
         index.d.ts
         misc.d.ts
         …
MyProject.csproj
libman.json

How do I modify the project (.csproj, tsconfig.json) so that I will work with the definition files and global variables in wwwroot\lib\@types instead of node_modules/@types?

I've created tsconfig.json and set

  "compilerOptions": {
    "typeRoots": [ "wwwroot/lib/@types" ]
  }

but now the build returns errors like "Cannot find name MyInterface" in site.ts. The MyInterface is defined in site.d.ts. Why the type was recognized when there was no tsconfig.json and now it doesn't? I want to avoid adding ///<reference> comments

EDIT:

I've ended up with renaming site.d.ts to global.d.ts (thanks to @itminus answer), and explicitly setting path to popper.js module in tsconfig:

{
  "compileOnSave": true,
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "popper.js": [ "wwwroot/lib/popper.js" ] //use this instead of wwwroot/lib/@types/popper.js which is incompatible
    },
    "typeRoots": [ "wwwroot/lib/@types" ]
  },
  "include": [ "wwwroot/js/**/*.ts" ]
}

popper.js is dependency of bootstrap 4. It's kind of tricky, because @types/bootstrap is dependent on popper.js rather than @types/popper.js (which is incompatible and would throw typescript errors in @types/bootstrap/index.d.ts);

Fortunately, popper.js contains typescript definitions (index.d.ts), I just had to tell typescript compiler where to look at it.

Answer 1

I guess the reason is that you're having the site.ts and site.d.ts under the same folder. As a result, only the site.ts file is loaded.

See discussion here

The resolution process always favors the .ts files over .d.ts. the rational here is that a .d.ts file can be generated from the .ts file, so the .ts file is a more up-to-date version of the truth

Move your site.d.ts to other folders , or rename it to site.global.d.ts. Both work flawlessly for me.