[Typescript Library] Navigate to Source Files instead of Declaration Files

The solution is to modify the tsconfig.json file to enable declarationMap under the compilerOptions.

// inside tsconfig.json
{
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true
    // ...

By enabling declarationMap, TypeScript will generate a .d.ts.map file in your dist directory. This file serves as a bridge between the .d.ts files and the source files.

With this configuration, inside of VS Code when you CMD+click on myFunc, you will be directed to its definition in the source file instead the .d.ts file.

export const myFunc = (input: string) => {};

This can save a substantial amount of time while debugging or grasping the functionality of a function.

 

When to Include Declaration Maps

It's important to recognize when including declaration maps is beneficial and when it's not. If you're distributing your code to npm, chances are you're not including the source files. So, in this case, a declaration map isn't required since your users will be utilizing the built code, not the source code.

On the other hand, in a monorepo where changes to the source code directly impact the built code, declaration maps can prove to be highly valuable.

To summarize, declaration maps enable you to navigate directly to the source code, bypassing the .d.ts files. To use them, enable declarationMap in your tsconfig.json.