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

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?

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.

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.

>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

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

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?

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.

please share both .js and d.ts files

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

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

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)

>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

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)

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

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

yes, please :)

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

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

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

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

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

I created a ticket for the still not working Angular+Typescript case:
https://youtrack.jetbrains.com/issue/IDEA-323574/Typescript-Angular-goto-implementation-navigates-only-to-.d.ts-files

For those who come to the problem in 2024+

CTRL + Click → opens interface (in some cases)

CTRL + ALT + Click → opens the actual implementation (very handy)

In my opinion it should be right the opposite, to be consistent in that IDE but its still better than combos like CTRL + F12, since it does not flow, if I need to remove a hand from the mouse. 

CTRL + Click → opens interface (in some cases)

CTRL + ALT + Click → opens the actual implementation (very handy)

You'd be everyone's champ to also paste in what these shortcts do in your keymap (for me ctrl+alt does nothing 🤷‍♂️)

@Jektvik he means “Go to > Type Declaration” and “Go to > Declaration or Usages”. And yes, I have the same problem in typescript files, they are doing the opposite.