How to include TypeScript files and compile whole file in Visual Studio 2012?

Question

I have installed the latest version of TypeScript and also the latest version of Web Essentials. I created a new TypeScript project in VS2012.

If have a utils.ts:

moduls utils
{
    export function getNumber() {
        return 4;
    }
}

And a app.ts:

/// <reference path="utils.ts" />

alert(utils.getNumber().toString());

The JavaScript files are both compiled seperatly. But to get app.js to work properly, the compiled source code of utils.ts has obviously to be included.

It does work when I run tsc app.ts -out app.js in my console, but I do not want to run it everytime manually.

Why cannot Web Essentials do the for me?

Answer 1

I have Web Essentials installed as I love the side by side editing, but I use the TypeScript compiler from within the project file to compile a single output.

The details are here: http://www.stevefenton.co.uk/Content/Blog/Date/201301/Blog/Getting-The-Right-Set-Up-For-TypeScript/

But the chunk of code for your project file is:

<Target Name="BeforeBuild">
    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\$(TypeScriptVersion)\tsc&quot; --out final.js @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</Target>

You'll probably find this is mostly already there in your project file and you just need to add the --out flag.

Answer 2

I'm working with VS2012 express for Web/TypeScript0.9.0.1 and the above didn't work. In case anyone else has this problem with that setup, I did get a similar workaround going where

1. in Project Properties -> Build Events -> Pre-build event command line I added: "C:\Program Files (x86)\Microsoft SDKs\TypeScript\tsc.exe" --target ES5 $(ProjectDir)app.ts -out $(ProjectDir)Final.js

2. Modified default.htm to load Final.js instead of app.js