Typescript declaration maps ( declarationMap ) support

As of Typescript 2.9.* we can set the field declarationMap: true inside our tsconfig.json file for a library.

Current behavior:

As a consumer of the library, when using `Go to definition` or `CTRL+Click` on a symbol from that library, IntelijIDEA goes to the .d.ts file instead of using the .d.ts.map file to show the actual source code of that symbol

Expected behaviour:

Show the actual source code of the library's symbol instead of the declaration file (.d.ts) when using `Go to declaration` or `CTRL+Click`

 

Is it possible to make Webstorm do this? For example, Visual Studio Code does this out of the box.

 

Thank you!

11 comments
Comment actions Permalink

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

I don't have a project to share right now but I can walk you through my setup:

1. create 2 typescript projects: project1 and project2. Both need to have a package.json file. Preferably set project1 name to `project1` so it's easier to follow the steps.

2. set project1 tsconfig.json to:

```json

{
"compilerOptions": {
"module": "commonjs",
"sourceMap": true,
"declaration": true,
"declarationMap": true,
"baseUrl": ".",
"outDir": "dist"
}
}

```

Also, have an `index.ts` file that exports something. eg: `export function log(message: string){ console.log(message); }`

3. Build project1 with `tsc`. This will create a `dist` folder. I wanted to simulate that this is a NPM package, so I copied package.json inside `dist` folder the run `npm link` inside that `dist` folder. This will create a link inside NPM that you can use later inside other projects.

4. Inside project2 run `npm link project1`. This will add a symlink inside project2/node_modules/ that will point to the `dist` folder of project1.

5. Create an `index.ts` file inside project2 and import the `log` method from project1: `import {log} from "project1";`. 

Notice that when you `Go to declaration` on the log method, you are pointed to the .d.ts file. For example, VSCode points to the `index.ts`. (of course, this file does not exist in the `dist` folder of project1 but is possible to show it because of the .d.ts.map file).

Also, because of that .d.ts.map, VSCode allows me to edit the index.ts of project1 file from inside node_modules of project2 (yes, I know. I should not do this but rather edit the project1 itself from another VSCode Windows or Intellij Window, but sometimes is easier to edit project1 from inside project2 ).

 

My question is: it is possible to have the same features inside Intellij/Webstorm/PHPStorm etc like VSCode does?

 

PS. if you find it hard to follow the steps I will prepare a sample project.

 

0
Comment actions Permalink

Thanks, recreated.

Webstorm doesn't jump to .ts file because it's not a part of the project - only dist is included, and it doesn't contain the .ts file. Files located outside of the project are not indexed and thus can't be navigated to

0
Comment actions Permalink

Is there a workaround to this? Are there any plans to make this work in the future?

What about reading the d.ts.map file at `runtime`, when I use `Go to declaration`. This way, when I Ctrl+Click, Intellij will look at the .d.ts file, then it will see that there is a .d.ts.map file, then it will use that to open the .ts file, without it being indexed.

 

 

 

0
Comment actions Permalink

The only workaround is (somehow) including the .ts files in the project. As I wrote, excluded files are ignored and can't be navigated to

0
Comment actions Permalink

It may work in my current case but what if the package was actually from NPM? It is not a good practice to upload the .ts files in an NPM package.

 

Also, I noticed an interesting thing: when I debug my code from project 2 and I step into the function in project1, Intellij shows me the actual .ts file from project1 (I suspect this is because of the .js.map file !?.. i don't know).

How it is possible for it to see the .ts file in debug mode if it doesn't have any .ts files inside the project1/dist folder?

By the way, I can edit that .ts file from inside project2 even if it is a file from project1(Of course, this won't apply if the package was actually from NPM because there should not be any .ts file inside of it).

0
Comment actions Permalink

>It may work in my current case but what if the package was actually from NPM? It is not a good practice to upload the .ts files in an NPM package.

And, if the .ts files are not included in distribution and thus not available, where should the IDE take them from?

>How it is possible for it to see the .ts file in debug mode if it doesn't have any .ts files inside the project1/dist folder?

When debugging, all files loaded in VM are available and can be resolved from sourcemaps. This is not the case for static code analysis type resolving/completion/navigation are based on

0
Comment actions Permalink

I understand. Thank you for your answer!

Are there any plans of implementing `static code analysis type resolving/completion/navigation` that can use .d.ts.map files?

0
Comment actions Permalink

No plans at the moment... Please feel free to file a request for this feature to youtrack, https://youtrack.jetbrains.com/issues/WEB (please make it clear that this is about resolving external files using source maps, as there is no need in using them if the required files are available in the project)

0
Comment actions Permalink

Elena Pogorelova Are there any plans on this already? It would be nice to have navigation through d.ts.map working like in VSCode.

0
Comment actions Permalink

Elena Pogorelova Does not work even if source-files are part of the package. But there is a work-around.

We are using a similar approach as Ionel-cristian Lupu does: We use npm link to include (symlink) local NPM packages (e.g. c:\dev\myPackage). This package contains both, "dist" and "src". "npm link" gets called in the root folder of the package.  In our project (which has a dependency to the package), we call "npm link myPackage". So when I check the "node_modules" folder of our project , it contains all the files correctly. (When we npm pack a tarball to upload the package to repo, we of course have the right .npmignore in place.)

The "declarationMap" setting in "tsconfig.json" is set correctly and the "dist" folder contains all the sourcemap-files pointing to the "src" folder.

Still, webstorm does not find the source files, it always navigates to the ts declaration files. 

Work-around: Add directory of local package to your project: "File => Settings => Directories => Add Content Root" and add the directory (in my sample: c:\dev\myPackage). It takes a long time and sometimes webstorm crashes, but after a restart it works fine: "CTRL + Click" navigates to the source code. 

I don't know how that magic works, because webstorm cannot know about the "real" dependencies between my "node_modules\myPackage" and the directory I just added. It could only guess based on the folder and file names?

 

 

0

Please sign in to leave a comment.