TypeScript compiles to JavaScript, thus it can be used in Windows Store apps. Other than with Web applications, where you can configure the way typescript compiles on the project’s property page, with Windows Store apps you’ll have to edit the project file by hand. Which is not that hard.
Edit the project file
To do this, unload your Windows Store JavaScript application project by right clicking and selecting unload.
Right click the project again and select edit.
What we need to do is tell MSBuild what it has to do when it encounters a TypeScript file. The whole XML file in front of you basically is nothing more than a configuration for MSBuild. It uses various “targets” that tell what to do in all kinds of situations and how properties are specified. If you want to dive deep into MSBuild, project files and everything around that you definitely should start reading here, at MSDN.
When TypeScript was installed on your computer, assuming you have, it added everything it needs to the MSBuild folder on your system. You can find this folder at C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v12.0\TypeScript.
First we’re going to define a property inside the project file to this path. The whole file is divided in PropertyGroups. You’ll have to search for a PropertyGroup that has a label named “Global”. It probably only contains a GUID at the moment and is probably around line 37. At the following to that group:
<TypeScriptPath>$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v$(MSBuildToolsVersion)\TypeScript</TypeScriptPath>
This line defines a property “TypeScriptPath” we’re going to need later on. The path uses 2 properties defined elsewhere, but they make up the path to the TypeScript folder I talked about earlier.
Next we’re going to add the default properties for the TypeScript compiler. A few lines below the “Global” PropertyGroup you’ll find 2 imports. Place the following line right below these:
<Import Project="$(TypeScriptPath)\Microsoft.TypeScript.Default.props" />
The last part we’re going to add to the project file are the configurations for the Debug and Release builds and the targets for TypeScript. These files contain the tasks that need to be executed to compile typescript. Add the following code at almost the end of the file, right before the last import.
<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="$(TypeScriptPath)\Microsoft.TypeScript.targets" /> <Import Project="$(TypeScriptPath)\Microsoft.TypeScript.jsproj.targets" />
The code is pretty straight forward. It tells TypeScript to compile to EcmeScript 5. When building using the Debug configuration it should leave comments intact, where it should remove these when building in Release. TypeScript uses Source maps for being able to set breakpoints in your TypeScript while debugging. You won’t need these files when running in Release. The last property that is defined tells the TypeScript compiler it should use AMD modules when needed, you could change this to CommonJS if you prefer.
And that’s it. Close the file and reload the project.
You should be able to add TypeScript files to the project now. The TypeScript files get a TypeScriptCompile Package Action.
One last note. Other than with web project you’ll have to include the .js and .js.map files in your project. Otherwise they won’t get deployed and your app won’t work.
To make things a little easier for everyone, I contributed the project template to the SideWaffle project.