How to enable Typescript Compilation for a VS2013 Class Library Project

I know its a little obscure, but I recently needed to find out how to enable Typescript in a Visual Studio 2013 Class Library project, because per default this is not enabled. (probably a bug)

Vanilla way of enabling TypeScript:

  1. Create a “Class Library” project
  2. Add a Typescript file (.ts)

This is were the bug occurs, normally the TypeScript file should compile on save.  However it does not. So after searching around and looking at the csproj file and comparing it to a MvcApplication csproj file I found out what the problem is:

Visual Studio correctly adds the TypeScript props file at the top of your csproj. file:

<?xml version="1.0" encoding="utf-8"?>
<Project 
  ToolsVersion="12.0" 
  DefaultTargets="Build" 
  xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props" />
  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />

(see first project import)

This allows your csproj file to use the <TypeScriptCompile> tag

e.g.

<TypeScriptCompile Include="Angular\Accounting\AccountingTestDirective.ts" />

Enabling compile on save is done by adding the missing

<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />
 

after

  <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />


at the end of the csproj file, before your own custom build tasks.

I believe this should have been done automatically. But now I know how to do it manually >D

2 comments for “How to enable Typescript Compilation for a VS2013 Class Library Project

  1. Bill
    2014/05/08 at 18:50

    Good post but all the ‘\’ have been stripped

    Import Project=”$(MSBuildToolsPath)Microsoft.CSharp.targets”

    should be

    Import Project=”$(MSBuildToolsPath)\Microsoft.CSharp.targets”

    etc.

    • thetoeb
      2014/05/08 at 20:50

      Yeah sorry, thanks for pointing that out. It probably happened when I moved my blog because I copy pasted the code out of my msproj files… Somehow I can’t seem to edit it either atm.

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax