Utilizing Declaration Maps in TypeScript
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
Transcript
00:00 Okay the solution is when you're inside this tsconfig.json you can add declaration map true and when we change this to declaration map true we're going to see that inside the dist folder when I save this we're going to see a new file being added. So let's save that and bam we get
00:18 index.d.ts map. What this does is it maps between the index.d.ts file and the source file. So this means now just by the presence of this file being in here that when I go into test.ts I can command
00:33 click onto my func and I can go bam and now I'm inside the actual source file here which is exactly what you want really. You don't often want to be actually messing about with the .d.ts file
00:46 you want to go straight to the source and the index.d.ts map helps you do that. So this isn't always what you want right like if you're publishing this to npm you probably aren't publishing the source files along with it because really when people use your code they're just
01:04 going to be using the built code but if you're in a monorepo where you actually have access to the source and when you change the source it changes the build code then declaration maps are really really important because they actually let you kind of go directly where you need to go without
01:19 messing around with the declaration files. So when you're in a monorepo declaration map true is something you want to set.