Using TypeScript in an existing Visual Studio Web Site project

I've got an existing Visual Studio project that was setup as a "Web Site" project. You can create projects like this by going to File->New Web Site. This is a different project type than a "Web Application Project".

I'd like to mix in some TypeScript on this project. However, I can't figure out how to instruct Visual Studio to "build" my .ts files and generate .js files. I've got the VS2012 TypeScript plugin, and I'm able to a create a TypeScript project, as outlined here. That project works fine, but that's more along the lines of a "Web Application Project". It's a different project type than a "Web Site Project".

Also, when I create .ts file, inside that file the editor gives me TypeScript syntax highlighting and intellisense. But again, I can't figure out how to get it to compile the TypeScript to JavaScript.

A little help?

Solution 1:

Visual Studio now supports "compile on save" for TypeScript files. I'm using Visual Studio 2013 Update 2, and I can turn this on in a Web Site project by going to Tools -> Options -> Text Editor -> TypeScript -> Project, and checking the box "Automatically compile TypeScript files which are not part of a project." I don't know why it's labeled like this, because it is clearly compiling files which are part of my project...

Many of the other answers to this are not applicable to Web Site Projects, because you can't hook into the build process. With a Web Site Project, there is no csproj or vbproj file, as the build is handled by IIS, not Visual Studio.

If you're using a Web Site Project, and "compile on save" doesn't work for you, there are only a few alternatives:

1) Use the command line TSC compiler to manually compile your code.

2) Create a custom tool for manually compiling your files. You can configure this for use in Visual Studio.

3) Create an "on-demand compilation" .aspx page that will compile the TypeScript and return it as JavaScript.

4) Use the TypeScript Compile JavaScript project to automatically your code in the browser. This gives you the "on-demand compilation" that normally comes with Web Site Projects.

Before "compile on save" was working in VS, I was using the TypeScript Compile. Now I'm happily using "compile on save."

Solution 2:

This one has been a bit of a moving target - but only because the TypeScript team have been improving how it all works. I have tried to cover as many scenarios as possible below, from the newest to the oldest.

The very latest on this is that this should now work in the latest versions of Visual Studio (currently v1.4) even for web projects.

I have taken these abbreviated notes from my much longer answer about adding TypeScript to an existing project.

VS 2013 / 0.9.5

If you are using the Visual Studio Extension for 0.9.5 or better along with Visual Studio 2013 you should find that it will automatically configure everything as soon as you add the first TypeScript file.

Auto TypeScript-isation didn't work?

The automatic config only adds a few lines - you could do that manually:

  <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')" />

VS 2012 / 0.9.x

The following project file configuration should work:

  <ItemGroup>
    <TypeScriptCompile Include="app.ts" />
  </ItemGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  </PropertyGroup>
  <Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets')" />

Even older set up?

I have found the most reliable way to add TypeScript to an existing project is to add the following to the project file:

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

You can add optional flags here too - such as --module amd:

    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; --module amd  @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" />

Solution 3:

As of version 0.8.2, released 21-Jan-2013, the VS2012 TypeScript plug-in supports compile-on-save without using WebEssentials. Go to Tools > Options > Text Editor > TypeScript > Project section and check the "Automatically compile..." box.

If you want to compile all your .ts files into a single .js file as part of your build process (which you probably should), then make sure the app.ts script has <reference>s to all the files that should be included, and add the following pre-build step to your project:

"C:\Program Files (x86)\Microsoft SDKs\TypeScript\tsc.exe" --out app.js app.ts

(Specifying the --out parameter tells tsc to include all referenced files.)