Is it possible to set up TypeScript npm packages to be installed in their original TypeScript format rather than JavaScript for the purpose of examining the source code?

Despite my lack of expertise in the inner workings of how a TypeScript library compiles itself to JavaScript before being placed in the node_modules directory, I have a question:

Coming from a PHP background, I am accustomed to being able to explore any library downloaded via Composer in my vendors folder and examine the actual PHP code the library is comprised of.

In my current Angular 2 project, upon downloading a TypeScript library, I receive what appears to be an abstract class or some form of contract (possibly a class declaration?):

export declare class FormGroup extends AbstractControl {
    controls: {
        [key: string]: AbstractControl;
    };
    constructor(controls: {
        [key: string]: AbstractControl;
    }, validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn);
    /**
     * Registers a control with the group's list of controls.
     *
     * This method does not update value or validity of the control, so for
     * most cases you'll want to use {@link FormGroup.addControl} instead.
     */
    registerControl(name: string, control: AbstractControl): AbstractControl;
    /**
     * Add a control to this group.

Subsequently, the class compiled into JavaScript looks like this:

export var FormGroup = (function (_super) {
    __extends(FormGroup, _super);
    /**
     * @param {?} controls
     * @param {?=} validator
     * @param {?=} asyncValidator
     */
    function FormGroup(controls, validator, asyncValidator) {
        if (validator === void 0) { validator = null; }
        if (asyncValidator === void 0) { asyncValidator = null; }
        _super.call(this, validator, asyncValidator);
        this.controls = controls;
        this._initObservables();
        this._setUpControls();
        this.updateValueAndValidity({ onlySelf: true, emitEvent: false });

Additionally, there is a mapping provided:

{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../../modules/@angular/forms/src/model.ts"],

I wonder if it's feasible to pass a parameter to npm in order for this library to download solely in TypeScript, allowing webpack to handle the compilation to JavaScript (strictly for development purposes), thus enabling me to directly access the source code as I develop?

Currently, whenever I wish to review the source, I must browse GitHub. Is this the recommended approach?

Answer №1

Unfortunately, if a module is released on npm without the source code being available, there's not much you can do. Your best bet would be to check out the module's source on GitHub or any other platform it may be hosted on.

One alternative option is to install the module directly from GitHub using npm install username/repo-name, which will place their repository in your node_modules directory. However, keep in mind that this method may not include the compiled JavaScript files.

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

Mastering regular expressions in TypeScript

My goal is to perform linting on staged files that are either .ts or .tsx and located within the src folder. I am aware that for selecting all js files one can use "*.js": [--list of commands--] inside the lint staged property. I'm curious to learn m ...

Tips for creating an observable in Angular 2

I'm having trouble declaring an observable and adding data to it in Angular 2. I've spent the last 5 hours trying to figure it out. Here's what I've attempted: this.products : Observable<array>; var object = {"item": item}; thi ...

Show blank value if there are no search results, along with an additional menu option

I am currently working on a Typeahead feature with a customized menu using the renderMenu method. In this setup, I have added 2 custom menu items at the bottom - one divider and a button. An issue arises when there are no search results. If I do not inclu ...

What is the best way to retrieve the previous URL in Angular after the current URL has been refreshed or changed

Imagine being on the current URL of http://localhost:4200/#/transactions/overview/5?tab=2 and then navigating to http://localhost:4200/#/deals/detail/ If I refresh the deals/detail page, I want to return to the previous URL which could be something like h ...

Vue.js and TypeScript combination may result in a 'null' value when using file input

I am attempting to detect an event once a file has been uploaded using a file input. Here is the JavaScript code: fileSelected(e: Event) { if ((<HTMLInputElement>e.target).files !== null && (<HTMLInputElement>e.target).files[0] !== null) { ...

Module error caused by Typescript path inconsistency

After creating a new model named "project" within the existing project, I encountered an error when attempting to import the class into another typescript file in VS2019. The specific error message thrown is as follows: "ts2307 cannot find module ' ...

Encountering a "No overload matches this call" error while using React, Typescript, and d3js

Encountered an error in Typescript while using the scaleLinear() function from d3js. Seeking assistance in resolving this issue. The code is in React and utilizes typescript. Below is the source code: import React, { useRef, useState, useEffect } from &apo ...

Encountering a SassError while trying to create unique themes with Angular Materials

I'm currently in the process of designing a unique theme for Angular Materials by following the instructions provided in this guide:https://material.angular.io/guide/theming#defining-a-custom-theme However, I've encountered an issue while attemp ...

Looking for assistance with transforming my Angular 2 component into an npm package

After successfully creating a component in Angular 2, my next step is to convert it into an npm library for easy installation. npm install Despite installing Angular CLI and searching online, I have been unable to find clear instructions on how to effe ...

A guide on successfully sending parameters to Angular routes

Currently, I am delving into Angular and exploring various basic concepts such as routing, Observables (and subscribing to them), making HTTP requests, and utilizing routing parameters. One scenario I have set up involves sending a HTTP GET request to JSON ...

Trying to run an npm or gulp command results in an error and requires admin privileges to execute

Whenever I attempt to execute any npm or gulp command in Git Bash/PS, I encounter the following error: npm install internal/fs/utils.js:269 throw err; ^ Error: EPERM: operation not permitted, lstat 'C:\Users\<admin user account> ...

Error in Nestjs Swagger: UnhandledPromiseRejectionWarning - The property `prototype` cannot be destructed from an 'undefined' or 'null' object

Currently, I am in the process of developing a Nestjs REST API project and need to integrate swagger. For reference, I followed this repository: https://github.com/nestjs/nest/tree/master/sample/11-swagger However, during the setup, I encountered the foll ...

Encountering issues while trying to npm install globalization with Ionic version 2.2.0, facing unmet dependencies

My attempt to integrate the "globalization" plugin and access .getPreferredLanguage() in my ionic 2 app has resulted in an UNMET DEPENDENCY error. $ ionic plugin add cordova-plugin-globalization --savePlugin "cordova-plugin-globalization" is already insta ...

In Windows 10 tablet mode, the Electron.atom application is set to always remain on top

Despite setting alwaysOnTop to true and minimizable to false, my electron app does not maximize on startup after every restart. This is how I create the mainWindow: var scl = 1; mainWindow = new BrowserWindow( { screen: electron.screen.getAllDisplays()[ ...

What is the solution for resolving array items in a GraphQL query?

I am facing an issue with my graphql Query, specifically in trying to retrieve all the fields of a Post. { getSpaceByName(spaceName: "Anime") { spaceId spaceName spaceAvatarUrl spaceDescription followin ...

Utilize a combination of generic parameters as the keys for objects in TypeScript

Is there a method to utilize multiple generic parameters as object keys in TypeScript? I came across this answer which works well when there is only one parameter, but encounters issues with more than one. The error message "A mapped type may not declar ...

What is the purpose of exporting both a class and a namespace under the same name?

While exploring some code, I came across a situation where a class and a namespace with identical names were exported from a module. It seems like the person who wrote this code knew what they were doing, but it raised some questions for me. Could you shed ...

Is there a discrepancy in the Lodash version number found in the package-lock.json file?

I have upgraded to the latest version of lodash, but in my package-lock.json file it still shows version @4.17.4. Veracode is flagging this as a high risk vulnerability. When I ran npm audit, I received the following message: Invalid: lock file's < ...

What is the process for including a new item in the p-breadcrumb list?

Having trouble getting my code to add a new item to the p-breadcrumb list on click. Any assistance would be greatly appreciated. Thank you in advance! Check out the live demo here ngOnInit() { this.items = [ {label: 'Computer'}, ...

Create a personalized Command Line Interface for the installation of npm dependencies

I am looking to develop a Node CLI tool that can generate new projects utilizing Node, Typescript, Jest, Express, and TSLint. The goal is for this CLI to create a project folder, install dependencies, and execute the necessary commands such as npm i, tsc - ...