The PhpStorm code completion feature is not functioning properly when working with TypeScript code that is distributed through NPM

I am facing an issue with two NPM modules, which we will refer to as A and B.

Both modules are written in TypeScript and compile into CommonJS Node-like modules.

Module B has a dependency on module A, so I have installed it using the command npm install --save A. It has been successfully installed in the node_modules/A folder.

Now, in my new module B, I want to use the class Class from module A. Here is my code snippet:

// import Class from 'A/lib/Class'; <- This import statement must be suggested by PhpStorm

export default class NewClass extends Class {
    // boring implementation details
}

The problem I am encountering is that PhpStorm (version 2016.3.2) does not provide any suggestions for adding an import statement like it does for local project files. The TypeScript Service indicates that the class name is not found, and PhpStorm only suggests renaming the class Class.

Is there a way to instruct PhpStorm to offer suggestions and code completion for TypeScript modules distributed via NPM?

I believe the number of TypeScript modules is increasing over time, and it would be more convenient in TypeScript projects to directly use TypeScript code from modules without .d.ts files.

Answer №1

After much searching, I have finally discovered a solution.

If you are looking to share TypeScript modules on NPM while also benefiting from IDE intellisense, it is crucial to configure the compilerOptions.declaration setting to true in your tsconfig file. This instructs the TypeScript compiler to create d.ts definitions for each .ts file. When working with dependent modules, your IDE will accurately prompt you to import files if any types remain unresolved in your code.

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

Using AngularFire2 to manage your data services?

After diving into the resources provided by Angular.io and the Git Docs for AngularFire2, I decided to experiment with a more efficient approach. It seems that creating a service is recommended when working with the same data across different components in ...

In TypeScript and React, what is the appropriate type to retrieve the ID of a div when clicked?

I am facing an issue in finding the appropriate type for the onClick event that will help me retrieve the id of the clicked div. const getColor = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => { const color = event.target.id; // ...

What is the process for obtaining a literal type from a class property when the class is passed as an argument, in order to use it as a computed property

Just a moment ago I posted this question on Stack Overflow, and now I have a follow-up query :) Take a look at this code snippet: import { ClassConstructor } from "class-transformer"; import { useQuery as useApolloQuery } from "@apollo/clie ...

Aligning the React Navigation header component's bottom shadow/border width with the bottom tabs border-top width

Currently, I am working on achieving a uniform width for the top border of the React Navigation bottom tabs to match that of the top header. Despite my efforts, I am unable to achieve the exact width and I am uncertain whether it is due to the width or sha ...

NodeJS on Cloudlinux requires that the node modules for applications be stored in a distinct folder (virtual environment) designated by a symbolic link known as "node_modules"

I recently encountered an issue while trying to deploy my Nodejs/TypeScript web application on my cpanel shared hosting. The error I received stated: * Cloudlinux NodeJS Selector requires the node modules for the application to be stored in a separate f ...

Error encountered while trying to install npm for a web project

While attempting to install npm modules, I am encountering the following issue: PS C:\Users\maxzag\Desktop\svoi> npm install npm ERR! Cannot read property '0' of undefined npm ERR! A complete log of this run can be found ...

The concept of Typescript involves taking a particular type and generating a union type within a generic interface

Picture a straightforward CollectionStore that contains methods for creating and updating a record. The create() method takes in a set of attributes and returns the same set with an added id property. On the other hand, the update method requires the set t ...

Tips on utilizing the identical template in ngIf

I need to display different templates based on certain conditions. For example: <template [ngIf]="item.url.indexOf('http') == -1"> <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" > ...

The functionality of Angular 5 reactive form valueChanges is not functioning correctly

I am currently working with a form inside a service: this.settingsForm = this.formBuilder.group({ names: this.formBuilder.array([]), globalIDs: this.formBuilder.array([]), topics: this.formBuilder.array([]), emails: thi ...

What is the procedure for renaming an item within a basic array in Angular?

I am working on a project in Angular and have constructed an array. I am now looking to change the name of one of the items in this array. While I have figured out how to rename keys in an array, I'm still unsure about how to do so for its values. ...

Priority is given to strings over numbers

Here's some code I'm working with: <tbody> <tr> <td class="float-left"> <!-- {{selectedTemplat?.modifiedAt | da ...

Trouble Connecting Local Database with PG NPM Package

I'm encountering issues with using the pg package on my computer. I've attempted to execute the following code: var pg = require('pg'); var con_string = "postgres://user:password@localhost:5432/documentation"; var client = new pg.Clie ...

The function does not throw a compiler error when a parameter is missing

Currently utilizing TSC Version 2.4.2 Please take note of the following interface: interface CallbackWithNameParameter { cb: (name: string) => void } This code snippet: const aCallback: CallbackWithNameParameter = { cb: () => {} }; Manages t ...

I am struggling with composing commands using npm

npm ERR! npm@5 has introduced a self-healing feature for cache corruption issues. npm ERR! Integrity mismatches are now treated as cache misses, ensuring that data retrieved from the cache is valid. If you npm ERR! want to ensure consistency, use `npm ...

The use of workspaces is not possible for global packages in npm

Today, NPM was functioning perfectly until out of the blue I started encountering errors with every NPM command. Even running : npm -v Results in the error : npm ERR! Workspaces not supported for global packages It has always worked seamlessly for me be ...

Error encountered in Typescript function wrapper: The provided data type of number[] cannot be assigned to [number]

Within this code snippet, the function requires two arguments: one for the function that needs to be wrapped and another for the argument producer. function wrapper<K extends Array<any>, T>(fn: (...args: K) => T, pd: (...args: any) => K): ...

Installing node and npm on macOS without admin privileges - the step-by-step guide

As a UX designer in a large organization, I have some basic programming knowledge. I've been struggling to find a way to install node / npm on macOS without admin rights, but so far I haven't had any success. I've gone through all the metho ...

Is the TypeScript compiler neglecting the tsconfig.json file?

I am new to TypeScript and currently exploring how to set it up in WebStorm. One of the first steps I took was creating a tsconfig.json file in the main directory of my project and updating the built-in TypeScript compiler to version 1.6.2. However, despit ...

When adding packages with NPM, it may create a loop of dependencies

Essential Details: Operating System: OS X 10.9.2 Npm version: 1.4.9 Node version: v0.10.28 Ruby Version : ruby ​2.1.1p76 ( 2/24/2014 Revision 45161 ) [ x86_64- darwin12.0 ] The issue arises when executing commands like npm install -g bower or sudo nom ...

Terminating process initiated by Node Package Manager using PM2

After installing pm2 using NPM without the global flag, I launched the app with the command "npm start" as specified in the package.json: "start": "pm2 start index.js" Now, how do I stop it? ...