Source map helps us with debugging and development so to show what this does.
Let me compile everything without that's where it's map setting.
If we now go to the browser and we want to understand what our code does we can go to the sources tab
here indie developer tools and there we find our JavaScript files.
Now we can dive into these files and the good thing is these files are fairly readable to us humans
of course because they contain javascript code in the end.
Now that's good.
But what if we had more complex types of code and we want to debug our typescript code and not the compiled
javascript code.
In other words it would be nice if we would see the types of files here and not the JavaScript files
with the source map option you can get there.
If you set this to true and you run the TSC command again then you see we got these dot J.S. dot map
files being generated as well.
Now if we look at them they're pretty strange files but what they do is they basically act as a bridge
which is understood by modern browsers and developer tools there to connect the JavaScript files to
the input files.
So with these files generated if I reload here you see in the sources tab we now not just have our JavaScript
files.
We also see our types could files there and we can even place breakpoints in the type of files.
And if I now click on that button for example it pauses in the typescript file which is of course super
super convenient because dad really takes our debugging process to the next level because we can work
directly in our input files.
Basically in our types could files instead of the JavaScript files now.
Nonetheless here I'll comment this out because we have a fairly simple project here and I don't want
to have these extra dot map files lie around here.
But this is super useful in projects because it simplifies debugging.