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.

评论操作 固定链接

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
评论操作 固定链接

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.


3
评论操作 固定链接

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
评论操作 固定链接

>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
评论操作 固定链接

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

0
评论操作 固定链接

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
评论操作 固定链接

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.

1
评论操作 固定链接

please share both .js and d.ts files

0
评论操作 固定链接

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). 

 

1
评论操作 固定链接

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
评论操作 固定链接

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
评论操作 固定链接

>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
评论操作 固定链接

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)

1
评论操作 固定链接

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

0
评论操作 固定链接

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

1
评论操作 固定链接

Is this still considered to be solved some day? It is so annoying

0
评论操作 固定链接

https://youtrack.jetbrains.com/issue/WEB-47153 is resolved in 2021.3; if you are still experiencing the issue, your problem must be different. Please feel free to file a ticket to youtrack, attaching a minimal code sample we can use to reproduce the issue

0
评论操作 固定链接

Hi. The problem is not resolved. CMD+click (ctrl+click) still goes to the type declaration and not to the actual function/variable

As someone suggested in another ticket : `cmd+click` should go to the actual declaration and `cmd+shift+click` (or something like that) should go to type declaration

1
评论操作 固定链接

Please feel free to file a ticket to youtrack, attaching a minimal code sample we can use to reproduce the issue

0

请先登录再写评论。