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
.