node.js - Go to the TypeScript source file instead of the type definition file in VS Code

Question

I created a custom npm library that is used in some root projects. This library is written in TypeScript. All sources are under a /src folder.

The tsconfig.json of the library contains those compiler options :

"sourceMap": true
"outDir": "dist"

The package.json file contains :

"main": "dist/src/index.js",
"typings": "dist/src",
"files": [
  "src",
  "dist"
],

In the end, the generated package contains the generated .js files, the d.ts files and the .ts source files :

- package.json
- /dist (`.js` and `d.ts` files)
- /src (`.ts` files)

In a root project where this custom library has been installed, I'm then able to add a breakpoint on a line calling a function imported from the library and stepping into it to debug its code, all in TypeScript. This is great!

But, in Visual Studio Code, when I CTRL-Click on a function imported from the library, without debugging, it leads me to the d.ts type definition file. I would prefere it to lead to the .ts source file! The way it is currently, I have to browse by myself to the /src folder of the library, under /node_modules, if I need to see the actual source code.

Is there a way to go to the TypeScript source file directly in VSCode, instead of the type definition file?

Answer 1

Since Typescript 2.9 it is possible to compile your library with the declarationMap flag

./node_modules/typescript/bin/tsc -p . --declarationMap

Doing so creates a declaration map file (dist/ActionApi.d.ts.map) and a link to the map at the bottom of the corresponding d.ts file

//# sourceMappingURL=ActionApi.d.ts.map

When VSCodes encounters such a declarationMap it knows where to go to and leads you directly to the source code.