Source Maps for TypeScript
Intelligently the TypeScript team have already done the hard work for us, there’s a Source Map generator in the compiler (thanks Ryan for pointing it out)!
So how do you use it? If you do a help dump of
tsc (the TypeScript compiler) there’s nothing in it:
D:\Code> tsc -h Syntax: tsc [options] [file ..] Examples: tsc hello.ts tsc --out foo.js foo.ts tsc @args.txt Options: -c, --comments Emit comments to output --declarations Generates corresponding .d.ts file -e, --exec Execute the script after compilation -h, --help Print this message --module KIND Specify module code generation: "commonjs" (default) or "amd" --nolib Do not include a default lib.d.ts with global declarations --out FILE Concatenate and emit output to single file --target VER Specify ECMAScript target version: "ES3" (default), or "ES5" @<file> Insert command line options and files from a file.
Well good news everybody, that’s not listing all the compiler switches ;). Check out the
batchCompile method for a bunch of gems, but most importantly there is a
sourcemap switch, so if I take my little project:
D:\Code\typescript-pubsub> tsc -sourcemap pubsub.ts
Now you’ll have two files,
Sweet! Let’s open the HTML file in Chrome Canary (of which I’ve already enabled Source Maps) and we get some cool new debugging stuff:
You can find your .ts file in the sources list.
I’ve break pointed inside of TypeScript!
Inspecting variables in TypeScript
The fact that there was enough forward planning from the TypeScript team to include support for Source Maps in the initial release is a really great thing. Through the magic of Chrome we can debug code written in it as through it was our original code. If you want have a play here’s the code.
Hopefully either the Visual Studio or IE (or both) team also pick up Source Maps and add support for them too.