What is the best way to include TypeScript definition files in version control?

I am working on a basic asp.net core web application and have integrated javascript libraries using libman.

Now, I am looking to incorporate typescript, therefore I have obtained typescript definition files for the libraries via npm. For example:

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

My goal is to add the .d.ts files to the source control so that other developers do not need to depend on NPM - after all, isn't that the purpose of libman?

The /node_modules folder is typically excluded in .gitignore by default.

How can I include the typescript definition files in my project?

gittypescriptasp.net-corenpmlibman

Answer №1

If you have utilized the LibMan to install javascript libraries, you can also use it to install definitions in the following manner :

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

The definitions will be installed in the default path libs/@types:

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

To benefit from TypeScript, you can create a tsconfig.json file and configure path mapping to load modules as demonstrated below :

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

By following this setup, you can take advantage of TypeScript features:

https://i.sstatic.net/YXuqt.png

[Update]

For ASPNET-CORE projects, the default path will be: wwwroot/lib/@types. If your tsconfig.json is located under the project directory (next to the *.csproj project file), you will need to adjust the paths as shown below :

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

https://i.sstatic.net/ernTN.png

Answer №2

For those who prefer to enter it manually: The JSON output from running 

libman install @types/jquery -p unpkg

{
    "provider": "unpkg",
    "library": "@types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93f9e2e6f6e1eat3a0bda0bda1aa">[email protected]</a>",
    "destination": "wwwroot/js/lib/@types/jquery"
}

(Please note: I already had a pre-existing libman.json file, and this was appended to the "libraries" array)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The dependencies of Nest are unable to be resolved by the system

Attempting to implement AuthService within UsersService and UsersService within AuthService results in a "circular dependency" issue. The error message states that "Nest can't resolve dependencies of the AuthService (UserModel, JwtService, ?). Please ...

node.jsangulartypescriptdependency-injectionnestjs

Concealing Dropdown Box Information Based on a Customized List in Angular

Is there a way to remove an item from a dropdown list once it has been selected? For example, if I have a dropdown box with options 'Dog', 'Lion', and 'Cat', how can I make it so that once I select 'Dog', it will no ...

angulartypescriptrxjs

Variability in determining union types for matched conditional results

In my experience, I have noticed a discrepancy in TypeScript's type inference when dealing with conditional return statements in functions. I have two identical functions, register and register2, outlined below: const register = (step: 1 | 2) => { ...

typescript

Creating a Typescript type for the react-intl component within a single file

Currently, I'm trying to incorporate the injectIntl component directly in the file instead of using the traditional export default injectIntl(Component). However, I am encountering difficulties when it comes to typing the component. This is a snippet ...

javascriptreactjstypescriptreact-intl

"Utilize React input event handler for enforcing minimum input

Is there a way to validate the minimum length of an input without submitting the form using the onKeyDown event? I've attempted to do so, but it seems to ignore the minLength property. I have a simple input field that doesn't need a form. Here&ap ...

reactjstypescript

The tslint exclusion is not functioning properly for tsoa endpoints

I'm trying to remove the routes.ts file generated by tsoa routes from being compiled by tslint. I've used the exclude option but it doesn't seem to be working specifically for routes.ts. The exclude option works for other files, except for r ...

node.jstypescripteslinttslint

Forming a distinct array from a collection of objects

Describing demoList: demoList = [ { id: 1, validFrom: "2019-06-01T00:00:00", validTo: "2020-06-17T00:00:00", xxxM: 50, xxxN: 2.2, xxxQ45: 2, xxxQ100: 1.65, xxxQ125: null, xxxQ150: null, xxxQ2 ...

arraysangulartypescriptobjectarraylist

Disregard the JSON formatting and extract solely the values

After extracting data from an API, the format of the returned information looks like this: [{"id":21},{"id":22},{"id":24}] Next, I need to send this data to a database using a different API. However, the format for sending should be like this: [21,22,24] ...

javascriptjsontypescript

Transmit information from child to parent as needed using @input and @output in Angular 2

Is there a way to pass an object from child to parent without relying on @viewChild or services? export class MultiSelectComponent implements OnInit { selectedItems: FormSelectComponentOption[] = []; @Input() items: FormSelectComponentOption[]; @Output ...

angulartypescript

Preventing the conversion of literals to classes in TypeScript

Using TypeScript, you can convert object literals to a class by doing the following: let businessObj = new ScenarioController(<FormatService>{ format: x => x }); Is there a way to prevent these types of casts in the compiler or linter? Oft ...

typescript

A guide on resolving the 401 Unauthorized error for private Github packages

Struggling to set up a private Github package for my Gatsby project bound for Netlify deployment. Despite numerous attempts, I keep encountering a 401 Unauthorized error... When I include my token directly or utilize the ~/.npmrc file, installation works ...

githubnpmnetlify

Encountering problems during installation of packages in Angular

Running into issues with commands like "ng add @angular/localize" or "ng add @ng-bootstrap/ng-bootstrap". As a newcomer, I'm struggling to interpret the error messages. I have included screenshots for reference. View angular version screenshot View e ...

angularnpmweb-development-server

Differences between npm package versions in local development and production environments

I am currently working on a project where I have created my own package called "database." The challenge I am facing is that as I develop the database alongside the project itself, I find it inconvenient to continuously push and pull versions of the databa ...

node.jsnpmyarnpkg

Exploring Angular 2/4: Unpacking the Process of Accessing API Data Using Tokens

Hello there, I am trying to retrieve API data with a token using Angular 2/4. Below is the code I have written: import { Component, ViewEncapsulation } from '@angular/core'; import { Http, Response } from '@angular/http'; import &apos ...

angulartypescriptangular2-http

Unpacking the information in React

My goal is to destructure coinsData so I can access the id globally and iterate through the data elsewhere. However, I am facing an issue with TypeScript on exporting CoinProvider: Type '({ children }: { children?: ReactNode; }) => void' is no ...

javascriptreactjstypescript

What is the best way to handle constants in TypeScript?

I am facing an issue with a React component I have created: const myComponent = ({constant}: Iprops) => ( <div> {CONSTANTS[constant].property ? <showThis /> : null </div> ) The error message says 'element implicitly has ...

javascriptreactjstypescripttypes

Effortless approach to collaborating with shared libraries

Managing my back-end project based on microservices architecture can be quite a hassle, especially with a shared lib hosted in verdaccio service. The process of editing the shared lib involves building it, pushing to git, waiting for the build, installing ...

node.jsnpmmicroservices

Building a Search Object using Template String Types

Here is a type definition that allows for specific responses: type Response = 'n_a' | 'n_o' | 'yes' | 'no' I want to create a type that ensures underscores are replaced with slashes: type ReplaceUnderscoreWithSlash& ...

typescript

Angular 6.0.2 - No specific target found in npm error

After checking the release schedule of Angular, it seems that Angular 6.0.2 has been announced as a stable version. However, I encountered an error named 'notarget' when trying to install this version using npm (error message displayed below). F ...

angularnpmangular6

Is it necessary for Angular Reactive Form Validator to convert types before checking the value for min/max validation?

Preface: My motivation for asking the questions below stems from my experience with form.value.purchaseCost. When the <input> field does not have type=number, I receive a string instead of a number. This required me to manually convert it to Number ...

javascriptangulartypescriptangular-materialangular-reactive-forms