We have created a modular MVC website where each module is built in a class library. There are plenty of examples on the web on how to do this. However when we decided to convert our Javascript files to TypeScript we ran into a few issues regarding debugging.

If you put a breakpoint into a TypeScript file in a regular project, Visual Studio will automatically pick it up (using the running javascript, and the mapping file generated by typescript). If you are using a custom VirtualPathProvider to retrieve the js files from resources in a class library things get a bit harder to debug.

To accomodate this scenario there are a few things we must do:

– Just as the javascript files we need to mark the js.map files as embedded resource too.
– Just as the javascript files we need to mark the TypeScript files as embedded resource too.
– The above file types must be retrieved via the custom VirtualPathProvider.
– Because we need to mark the TypeScript files as embedded resources, and because file can only have one build action, we also need a good way to compile all typescript files.

The first two points are obviously the easy parts, just select all .ts and .js.map files in your class library project, and set the build action to Embedded Resource.

|To have the custom VirtualPathProvider pick up those file types, you will have to change the web.config file of your MVC host project. Something like the following line should already be present:

<add verb="GET" path="*.js" name="Static for js" type="System.Web.StaticFileHandler" />

Add the following two lines just below that:

<add verb="GET" path="*.ts" name="Static for ts" type="System.Web.StaticFileHandler" />
<add verb="GET" path="*.js.map" name="Static for js.map" type="System.Web.StaticFileHandler" />

Now for the final bit. Since we set the TypeScript files to EmbeddedResource they won’t compile to a javascript file anymore when you build the project. To counteract this, add a typescript file to your project that just references all your other typescript files like so:

/// <reference path="My1stFile.ts" />
/// <reference path="My2ndFile.ts" />

Keep this file set to the regular build action. And on build, this file, and all files it references will get built.