Adding TypeScript To An Existing Visual Studio Project

Feeds

RSS Feed

<< September | October | November >>

Thursday, 4th October 2012

The chances are that if you are going to use TypeScript, you'll want to add it to an existing project. The great news is that it is really simple to do.

The New Way

As of December 2013 things are a bit different than when I first wrote this article.

If you are using Visual Studio 2013 and you have the TypeScript Visual Studio Extension installed, you'll get the following message as soon as you add a TypeScript file to your project...

TypeScript Automatic Configuration

If you don't get this message, you'll find that there are just a couple of lines you need to add to your project file:


  <ItemGroup>
    <TypeScriptCompile Include="Scripts\app.ts" />
  </ItemGroup>
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

If you aren't using all the new funky stuff - there is still "the old way", as described below:

The Old Way

This method applied when I wrote this article back in the distant past... If you're using some old bits and pieces you found lying around it may still be useful - but read The New Way above for the correct way to do things as of December 2013!

There are two simple steps. You have probably already performed the first step and downloaded the TypeScript for Visual Studio extension - so let's skip on to the second step - adding the build event to your project.

The second step (and this is my second solution to this problem as the pre-build event could sometimes be troublesome) is to add the following sections to your project file. You will need to select "Unload project file" from the project context menu to edit the project within Visual Studio - or you can just hack it in Notepad!


  <ItemGroup>
    <AvailableItemName Include="TypeScriptCompile" />
  </ItemGroup>
  <ItemGroup>
    <TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
  </ItemGroup>
  <Target Name="BeforeBuild">
    <Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" @(TypeScriptCompile ->'"%(fullpath)"', ' ')" />
  </Target>

This will compile all your .ts TypeScript files into .js JavaScript files.

Want more information on TypeScript? Get TypeScript For JavaScript Programmers from Amazon.

You Are Here: Home » Blog » Adding TypeScript To An Existing Visual Studio Project