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

Answer 1

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 2

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 3

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.

Answer 4

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 5

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 6

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