Before we start let’s just ask a few questions:
Why Typescript?
There are two main goals of TypeScript:
-
- Provide an optional type system for JavaScript.
- Provide planned features from future JavaScript editions to current JavaScript engines
Category Archives: TypeScript
TypeScript not publishing it’s JavaScript files that it builds
Okay second issue I have come across with TypeScript is that even though you can get TypeScript to build your JavaScript files during the build process whist using Visual Studio, when you come to publish the project the JavaScript files are no longer there….!
Why?
Well it is quite simple the Project file does not know about them, so all you need to do is add them to your Project file.
One thing worth mentioning here is why don’t you add the JavaScript files directly from Visual Studio? Well you can but when and I am sure you are using a Source Control the JavaScript files will be locked, and if they are locked you won’t be able to get TypeScript to build your files a post compile.
Quite a simple solution, and one that works.
TypeScript and Building with your Visual Studio Project
TypeScript is great, and it is in Preview from Microsoft. One of the first issues I had was how to get TypeScript to build your JavaScript files every time you build your Visual Studio project.
Steps to achieve this:
- Open your project file using editor (so you can see the xml definition)
- Search for import of Microsoft.Common.targets tag
<Import Project=”$(MSBuildBinPath)\Microsoft.Common.targets” /> - If you have not found this reference in your project include it, it can be added after <Project *>
This will enable for you to have BeforeBuild and AfterBuild events.
<Target Name="AfterBuild">
<Message Text="After Build" Importance="high" />
</Target>
<Target Name="BeforeBuild">
<Message Text="Before Build" Importance="high" />
</Target>
Put following xml under first PropertyGroup. This will introduce variables that we are using later on.Note: make sure you have correct version of typescript installed
<PropertyGroup> <TypeScriptVersion>0.8.1.1</TypeScriptVersion> <CompileTypeScript>true</CompileTypeScript> </PropertyGroup>
Now we are ready to introduce our implementation.The following can be inserted in Project tag, its best to add it in the end of the file.
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003"> <!-- omitted code --> <!-- Insert your implementation --> </Project>
Following tag will get all files from project directory that ends with .ts
<ItemGroup> <TypeScriptCompile Include="$(ProjectDir)\**\*.ts" /> </ItemGroup>
Update before build event to call our custom target
<Target Name="BeforeBuild"> <Message Text="Before Build" Importance="high" /> <CallTarget Targets="TypeScriptBuild"/> </Target>
And our implementation of build for every TypeScript build for every single file.
<Target Name="TypeScriptBuild" Inputs="@(TypeScriptCompile)" Outputs="%
(Identity).Dummy" Condition="'$(CompileTypeScript)'=='true'" >
<Message Text="Building typescript file - @(TypeScriptCompile)" Importance="high" />
<Exec Command=""$(MSBuildProgramFiles32)\Microsoft SDKs\TypeScript\$(TypeScriptVersion)\tsc" -target ES5 "@(TypeScriptCompile)"" />
</Target>
Thanks for Pavel Svarc for find this out