How to add TypeScript definition files to source control?

Question

I have simple asp.net core web application, where I have installed javascript libraries using libman.

I want to use typescript, so I have installed typescript definition files for the libraries using npm, e.g:

npm install @types/jquery --save-dev
npm install @types/bootstrap --save-dev

I would like to add the .d.ts files to source control, so that other developers does not have to rely on NPM - it is the purpose of libman, isn't it?

/node_modules folder is ignored in .gitignore by default.

How do I include the typescript definition files?

the problem is that node_modules contains a lot of garbage, readme files, json files, javascript files... why the question was downvoted, anyway? — Liero, Nov 28 '18 at 20:27

itminus · Accepted Answer · 2018-11-29T10:26:37.920

3

Since you have installed javascript libraries using LibMan, you could simply reuse the LibMan to install the definitions too :

libman install @types/jquery -p unpkg
libman install @types/bootstrap -p unpkg

The default path will be libs/@types：

lib/
    @types/
        bootstrap/
            index.d.ts
            ...
        jquery/
            index.d.ts
            ...

I create a tsconfig.json and configure path mapping to load modules as below :

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "jquery": ["lib/@types/jquery"] ,
            "bootstrap":["lib/@types/bootstrap"]
        }
      }
}

Now we can benefit from the typescript:

[Update]

For ASPNET-CORE project, the default path will be :wwwroot/lib/@types, if we have our tsconfig.json under the project directory (next to the *.csproj project file ), we need change the path to :

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "jquery": ["wwwroot/lib/@types/jquery"] ,
            "bootstrap":["wwwroot/lib/@types/bootstrap"]
        }
      }
}

edited Nov 29 '18 at 10:26

answered Nov 29 '18 at 05:42

itminus

23,772
2
53
88

that's great, however I wasn't able to get it working with global variables, type $ or jQuery... – Liero Nov 29 '18 at 07:53
@Liero Did you import jquery by `import $ from "jquery"` ? the "jquery" module doesn't not export a `$`, so we need import everything as `$` or `jQuery` – itminus Nov 29 '18 at 07:57
no, but using npm install @types/jQuery I didn't had to. Since the cdn packages uses global variable $, type definitions should too.. – Liero Nov 29 '18 at 09:47
I see `declare const $: JQueryStatic` in @types/jquery/misc.d.ts. I guess the problem is with tsconfig.json which has probably different default values than `` in csproj…. – Liero Nov 29 '18 at 10:00
@Liero Could you please elaborate on "but using npm install @types/jQuery I didn't had to". I just tried `npm i @types/jQuery ` , the files downloaded are exactly the same. Have you configured the path mapping ? – itminus Nov 29 '18 at 10:00
@Liero I find that the default path for aspnet-core project is `wwwroot/lib/@types`, so if you're creating a aspnet-core project and install the dependencies by default, you need change the path to `"jquery": ["wwwroot/lib/@types/jquery"] ,` and `"bootstrap":["wwwroot/lib/@types/bootstrap"]` – itminus Nov 29 '18 at 10:08
I've solved it by using "typeRoots": [ "wwwroot/lib/@types" ], but I have different issue using this approach here: https://stackoverflow.com/questions/53536608/how-to-use-libman-instead-of-npm-to-download-typescript-definitions – Liero Nov 29 '18 at 11:17

score 1 · Answer 2 · answered Jan 03 '19 at 23:32

For those that would rather just type it in themselves: The JSON generated by libman install @types/jquery -p unpkg

{
    "provider": "unpkg",
    "library": "@types/jquery@3.3.29",
    "destination": "wwwroot/js/lib/@types/jquery"
}

(Note: I had an existing libman.json file, and this was added to the "libraries" array)

How to add TypeScript definition files to source control?

2 Answers2