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

Angular so that the autocomplete field is filled with information retrieved from a PHP URL

I am currently utilizing an autocomplete field that needs to fetch data from a MySQL database based on a PHP (YII2) action. The autocomplete field is currently being populated statically. Below is the code used to populate the autocomplete field: app.cont ...

I am currently unable to retrieve any results for my fullcalendar tooltip

I am currently working on setting tooltips for events using Primeng's fullcalendar. Despite initializing the tooltip in the web console, I am unable to see it when hovering over an event. My development environment includes Typescript, Primeng 7.0.5, ...

Node.js may have experienced a hiccup, but my bash script continues to run smoothly despite setting -e

My nodejs script is triggered by a bash command which runs in a Jenkins pipeline. The issue I'm facing is that the pipeline does not stop when an error occurs. Specifically, it should not execute the "echo git add ." command. I have tried adding set ...

Error encountered in Ngrx data service when using Angular resolver

I have successfully implemented an NGRX Data entity service and now I'm looking to preload data before accessing a route by using a resolver. import { Injectable } from "@angular/core"; import { ActivatedRouteSnapshot, Resolve, RouterS ...

Managing Unix Inter-process Communication signals within npm scripts

In my current project, I am working on implementing graceful shutdown for a node API. During development, I usually start this process using the common 'start' script. However, while doing so, I have noticed some unexpected behavior that has some ...

The functionality of logger.debug is unavailable when utilizing log4js

I recently started using log4js to capture logs in my node js project. The version of Node.js I am currently using is v10.16.3. However, when running the code, I encountered an error stating "logger.debug is not a function". Could this be due to compatibil ...

Tips for configuring Angular 2 to send all requests in the form of application/x-www-form-urlencoded

My experience with Angular 1 has helped me in understanding how to implement a similar solution, but I'm stuck on the final step. Just like before, the backend developer for our application is set up to accept requests with type application/x-www-for ...

What causes TypeScript generics to infer varying types when an array member is enveloped?

I'm having trouble finding an answer to this potentially duplicate question, so please redirect me if it has already been addressed. My experience with generics in TypeScript has shown me that the inferred types can vary based on whether a generic is ...

What kind of impact on performance can be expected when using index.ts in a Typescript - Ionic App?

When setting up the structure of a standard Ionic app, it typically looks like this: app pages ----page1 ---------page1.ts ----page2 ---------page2.ts If I were to include an index.ts file in the pages folder as follows: pages/index.ts export { Page1 } ...

Just starting out with Angular and struggling to understand how to fix the TS(2322) error

Main Code: export class TodosComponent implements OnInit{ todos!: Todo[]; localItem: string; constructor(){ const data = localStorage.getItem("todos"); this.localItem = data; if(this.localItem == null){ this.todos = []; } ...

I'm interested in learning how to implement dynamic routes in Nexy.js using TypeScript. How can I

I have a folder structure set up like this: https://i.stack.imgur.com/qhnaP.png [postId].ts import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { pid } = router.query return <p>Post: {p ...

Switching from a TypeOrm custom repository to Injectable NestJs providers can be a smooth transition with the

After updating TypeORM to version 0.3.12 and @nestjs/typeorm to version 9.0.1, I followed the recommended approach outlined here. I adjusted all my custom repositories accordingly, but simply moving dependencies into the providers metadata of the createTe ...

Retrieve the Typescript data type as a variable

I have the following components: type TestComponentProps = { title: string; } const TestComponent: React.FC<TestComponentProps> = ({ title, }) => { return <div>TestComponent: {title}</div>; }; type TestComponent2Props = { bod ...

Encountered an error while attempting to access the 'type' property of undefined within the Redux store for an action defined in an external package

In my quest to expand my knowledge of React (coming from an ASP.NET background), I encountered a challenge. I have multiple React applications where I intend to utilize common UI components, so I decided to extract these into a separate npm package. This a ...

Enhance user experience by enabling clickable links in Angular comment sections

Currently, I'm developing an application that allows users to add comments to specific fields. These comments may contain links that need to be clickable. Instead of manually copying and pasting the links into a new tab, I want the ability to simply c ...

Can you merge two TypeScript objects with identical keys but different values?

These TypeScript objects have identical keys but different properties. My goal is to merge the properties from one object onto the other. interface Stat<T, V> { name: string; description: string; formatValue: (params: { value: V; item: T }) =&g ...

What is the best way to turn off the recently added NPM spinner when using the command line interface?

Is there an easy way to disable it as it's causing issues with the visibility of my unit tests? ...

Encountered a problem while trying to install Angular CLI using npm

My current version of node js is 8.9.2 and I encountered an issue while trying to install Angular CLI. When running this command: npm -g install @angular/cli I received npm errors that stopped the installation process. Here's the error message show ...

What is the importance of using a server to host an Angular 2 app?

I recently finished developing a front-end application in Angular 2 using angular-cli. After completion, I created a bundle using the command ng build. Here's what puzzles me - my app consists only of JavaScript and HTML files. So why do I need to h ...

Angular 5 Dilemma: Exporting UI Components without Locating Template

My current project involves developing UI Components that will be used in various web projects within the company. Our plan is to publish these UI components as an npm package on our local repository, and so far, the publishing process has been successful. ...