Compile modules and multiple files

Topics: General
Jan 19, 2014 at 9:24 AM
I am trying to write a javascript game in typescript. I come from a webdev, AS3 and C# background and have done a lot of small stuff in JS. What I want is to build the app like I did in AS3 and C#: modules containing classes in seperate files.

It would be optimal to compile this to a single minimized js file, but any other solution where I can use multiple files in development without having to declare them all in html would also be welcome.

I'm quite confused by the answers i find online. There are wildly different approaches, with editing .csproj, placing ///<reference in one file, using import statements, compiling to AMD with requirejs, and all other kinds of ways. Most of them say to call a command line like "tsc --out final.js app.ts" which i don't even know how to execute in visual studio.

So what is the best way to write a typescript app in a similar way to AS3 or C#, and being able to include it easily in a web-page, using visual studio 2012 with the latest version of typescript (0.9.5 now i think)? Is there some documentation I'm missing?
Coordinator
Jan 21, 2014 at 3:22 PM
If you're in Visual Studio 2013 with TypeScript 0.9.5 installed, you can create a project and then edit the project properties by right clicking the project and then selecting "TypeScript Build" on the properties page. From there you can select "Combine JavaScript Output into file" and set the file you want to compile to. If you're in Visual Studio 2012, you can still configure this, but you'll need to unload the project, edit it, and set the property TypeScriptOutFile, like this
<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
    <TypeScriptOutFile>myoutput.js</TypeScriptOutFile>
  </PropertyGroup>
You will still need to run the resulting .js through a minifier, as the compiler is meant to be just part of the toolchain rather than the whole thing. It outputs a clean .js file you can use as in put to the next part of the toolchain.

The different approaches to how you handle .js files comes from JavaScript itself, which TypeScript builds on. As you grow to larger scripts, you may want to investigate some of the other solutions, like module loaders, which help you break large codebases into more modular components that can be loaded as they are needed.
Jan 21, 2014 at 5:20 PM
Ok, I tried to do what you describe:
I pasted the propertygroup in my csproj file, reloaded it and built the project. But myoutput.js was nowhere to be found. I also don't understand how visual studio could know what to compile and where to put myoutput.js. Am I missing something?