How to navigate straight to a function implementation, instead of declarations and usages?

I am using WebStorm 2017.3 EAP in a large AngularJS app. I have an element like this <li ng-show="vm.CanUse('a-b-c')" ng-class.. and want to jump to where CanUse is implemented. I hit ctrl-alt-B (or ctrl-click) on 'CanUse'.  The tootip shows 'Multiple Implementations' and I get a list of 'Choose Declarations'. Each one goes to a Typescript Interface file. On the declaration in an Interface file I get an option to show the usages which is a list of tens of files.

I am not interested in the usages because there are a lot of files. I want a list of files which have implementations of CanUse only. Is this possible? I know one or more of the usages files has the implementation but I would like WebStorm to show only implementations list of files.

In Resharper I can ctrl-alt-click and go straight to implementation. I am looking for a similar functionality in WebStorm.

17 comments
Comment actions Permalink

Normally Ctrl+click opens the CanUse() declaration in your controller code. If you can see typescript d.ts files instead, this likely means that function is matched by name only, and actual method declaration is not found

Please can you provide files/code snippets I can use to recreate the issue?

0
Comment actions Permalink

I have the same problem now with 2018.3.6.
"Go to definition" and "go to  declaration" show me only d.ts declaration
and do not suggest any list of choices.
So I have to search my JS implementations by stupid Ctrl + Shift + F.


2
Comment actions Permalink

Also facing this issue, `Go To Implementations` is navigating to the definition files. If I "un-exclude" `dist` folder, it jumps to the compiled Webpack JS files.

0
Comment actions Permalink

>If I "un-exclude" `dist` folder, it jumps to the compiled Webpack JS files.

this is expected - if the files are not indexed, no navigation is possible

0
Comment actions Permalink

For Typescript, it should go to the Typescript source file, and not the compiled JS files

0
Comment actions Permalink

If both .ts and .d.ts files exist in the project, Navigate | Declaration jumps to .ts. Moreover: when declarations are generated by the built-in Typescript compiler service, they are excluded from indexing by default, only .ts files are considered

Can you share a sample project that can be used to recreate the issue?

0
Comment actions Permalink

To reproduce:

1 - Create a .js file and a corresponding .d.ts file.
2 - Try to navigate to the function definition in the .js file.    It will never work.

0
Comment actions Permalink

please share both .js and d.ts files

0
Comment actions Permalink

Hi Elena,

I am running into this issue as well. 

In order to demonstrate the problem, I have created this GitHub repository. If you follow the steps in the readme, you'll see that you cannot actually navigate to the JavaScript implementation of a file w/ a TypeScript declaration.

I also included this screen recording to further demonstrate (switch to 1080p if it's blurry). 

 

0
Comment actions Permalink

Your sample project doesn't give me any clue, as the files are empty. What do both file implementation (in .js) and declaration (in d.ts) look like?

Current behavior depends on a way d.ts files are defined and included.

  • If type definitions are installed in the @types folder, IDE will try to navigate to the JavaScript sources of the library when using Navigate | Declaration. Please note that this only works for symbols that are defined as classes, variables or functions (and not interfaces or types) in the .d.ts file. If all symbols in d.ts are defined as types or interfaces, that makes it impossible to map them to the actual code.
    Note also that .js imports in TypeScript files are not resolved unless "allowJs" Typescript option is enabled in tsconfig.json

  • If type definitions are available inside the module (included in npm module distribution), IDE will not index the JavaScript sources by default and, thus, will not be able to navigate to them. To index these files, please choose Include JavaScript files action from the node_modules/<module_name> folder right-click menu

0
Comment actions Permalink

The contents of the files don't matter, it is happening to all dependencies shaped this way. I made dummy files to demonstrate the problem: It is impossible to use the IDE's tools to navigate to the Javascript file (you have to manually open in Project explorer). 

Have you tried running the project and attempting to click through? If not, have you watched the video I linked?

Thank you for pointing me to the `Include JavaScript files` action. However, it did not change the behavior of the IDE. I am still unable to navigate to JavaScript source files.

(I'm using WebStorm 2020.2)

0
Comment actions Permalink

>The contents of the files don't matter

 

it does. For example, if I add the following code to webstorm-typescript-declaration-dependency/index.js and index.d.ts

function getArrayLength(arr) {
return arr.slice;
}

module.exports = {
getArrayLength,
};

and

export function getArrayLength(arr: any[]): number;

and then import the function in webstorm-typescript-declaration-problem/index.js

import { getArrayLength } from "webstorm-typescript-declaration-dependency";

const arr = [];
getArrayLength(arr);

Ctrl+click on will jump to function implementation in index.js

0
Comment actions Permalink

Hi Elena, 

Thank you for the response. I confirm that when I use the code you supplied, I am able to correctly click-through. I had not yet seen it function correctly.

I have pushed an additional commit to my project which includes a non-functioning example.

The libraries we are using are babelified browser compatible code, so that is indeed a difference. (Though I think the "view implementation" feature should always work correctly regardless of the code involved)

0
Comment actions Permalink

Looks as if it just can't map declaration to implementation when using your code...

0
Comment actions Permalink

🤔 Can anything be done to work around this? Should I file a ticket? 

0
Comment actions Permalink

For those interested, the ticket is here https://youtrack.jetbrains.com/issue/WEB-47153

0

Please sign in to leave a comment.