Using TypeScript in an existing Visual Studio Web Site project

Question

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?

Answer 1

I read posts above when I try to use *.aspx and *.ts files in one VS-2015 project. Unintentionally I found simple and clear recipe "How to combine *.ASPX and *.TS code files in one Visual Studio project" ans I want to share this solution for all. Excuse me if it's too easy.

For using *.aspx and *.ts files in one VS - project, create new project of type "ASP.NET Web Application". Then, on next step, select "Empty" in top "ASP.NET 4.5.2 Templates" pane and "Web Forms" and "Web API" in bottom "Add folders and core references for:" pane. I add two pictures with this steps.

Also, I have a script error when I using variables of JQuery type in my TypeScript code. For using JQuery type I need add three nested folders in project: Scripts\typings\jquery and add jquery.d.ts file with type definitions for jQuery. I think, details are easy to googling.

Thank you for my friend, who help me to found this solution. first step of creation project

second step of creation project

Answer 2

For this to work on my setup, I have the "Automatically compile TypeScript files which are not part of a project" checkbox checked.

But this wasn't enough. For automatic compilation to work in a website project, I had to create a tsconfig.json file with the following configurations:

{
"compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "alwaysStrict": true,
    "module": "amd"
},
"compileOnSave": true,
"exclude": [
    "node_modules",
    "wwwroot",
    "packages"
]
}

The "compileOnSave": true setting is the crucial one here. It's what triggers automatic compilation.

Typescript version 2.1.5 on Visual Studio 2017

Answer 3

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

Answer 4

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."

Answer 5

Josh, I am using Visual Studio 2012 Express for Web and what I've realized is that every time you save the .ts file, it automatically generates the .js.

Check your .ts folder each time you save a file and confirm if this is not happening to you too.

Answer 6

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.)

Answer 7

Since there's no project file, you may have to revert to "manually" running the TypeScript compiler.

Open a Visual Studio Command Prompt (Start -> Programs -> Microsoft Visual Studio 20xx -> Visual Studio Tools -> Developer Command Prompt).

Run: tsc your_input_file.ts --target ES5

To supply multiple .ts files, use a text file with the @args_file_name parameter.

When you get tired of that, put it all in a batch file.

When you get tired of using a batch file, convert your app to a Web Application and alter the .proj file as per Sohnee's answer.

Answer 8

Check if your .ts files in properties are associated with TypeScriptCompiler.

Keep in mind that opening a .ts file in VS into so called virtual project is not the same as having a reference to file in VS web project. First one will not let you set build action on it. While another one will.

PS. Get Web Essentials VS add-on to get transformations on file save, texteditor ts/js split and built-in minimizer.

Edit: Yeah, I didn't notice there is no such build action available with other projects at start... But hey, I pushed Sohne into right direction.