TypeScript is a language for application-scale JavaScript. TypeScript adds optional types, classes, and modules to JavaScript. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS. TypeScript compiles to readable, standards-based JavaScript. Try it at http://typescriptlang.org/playground.
Our Technical Evangelist, Yizhe Shen, will teach you how to get started with TypeScript for Windows 8 Projects!
Hi Everyone!
It’s been a very long time since I last posted on this blog. I will be posting more frequently these days as I have more time to ramp up with our latest and coolest technologies. As I have volunteered to do a TypeScript lightning talk at our Hack Weekend event in Microsoft Singapore, I decided to mix in some Windows 8 element into it to make things interesting.
Software to download & install:
· TypeScript http://www.microsoft.com/en-us/download/details.aspx?id=34790
· Web Essentials http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6
Please make sure your VS 2012 is in RTM and not RC/Beta as Web Essentials needs RTM version to install correctly.
So, if you are new to TypeScript, you can check out the official website at http://www.typescriptlang.org/. From the official site, you will be able to test out TypeScript live through the PlayGround page (http://www.typescriptlang.org/Playground/) which gives you instant TypeScript to Javascript conversions via the browser. This is a great place to test out some of the new syntext for TypeScript. It also contains a couple of sample projects to illustrate how you can use TypeScript in different scenarios – one of which is a Windows 8 Sample Project.
To get started in writing TypeScript code, you will need to install a plug-in for Visual Studio 2012. There are a couple of ways you can get TypeScript working but for this post, we will focus on getting it integrated into VS2012. Simply navigate to http://www.microsoft.com/en-us/download/details.aspx?id=34790 and download the latest TypeScript plug-in app. The current version we will be using today is the 0.8.1 release. Installation is a breeze as it’s a MSI file. Do take note that even thou you can install the file without VS being installed, to get it working, you have to make sure you reinstall the files after VS is installed to get it integrated.
Now, this is where things get slightly different if you wish to get TypeScript working in a Windows 8 Javascript/HTML5 apps. As TypeScript currently only have templates for Web Projects, you will need to manually enable TypeScript to work on a Windows 8 VS Project.
If you can see the template above, it means you have TypeScript successfully installed in your machine. Next, close VS and proceed to install the Web Essential for VS 2012 (http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6) This is important because it will gives you the split screen later when you can see live JS code being generated from your TS code.
Once everything is installed, you can now proceed to create a simple Windows 8 solution.
Once your solution is created, this is what you will see in the solution explorer:
For web projects, the TS plug-in will automatically setup the files for you to link your JS files with your TS code. However, as this is yet to be implemented by the team for Windows 8 projects, we will have to do it manually. But before we do anything, let’s import the necessary files that TS needs for Windows 8 apps.
The files that you need to be included in your project are:
- winjs.d.ts
- winrt.d.ts
- lib.d.ts
- jquery.d.ts
You can download these file from http://typescript.codeplex.com/SourceControl/changeset/view/fe3bc0bfce1f#typings%2fjquery.d.ts
To get the files, just download the entire project and navigate to /typings/ folder to obtain those files. Once you have these files, add them to your project. In our project, we add them directly to our /js folder.
Now that you have everything setup, you can start preparing your default.ts/.js files.
Steps:
1. Delete the default.js file and create a new default.ts file.
2. Create a default.js file from scratch by adding a new JS file.
When you click on default.ts, you will realize that VS will automatically go into split screen mode. This is what you will see:
Next, you need to modify your default.ts file to make TypeScript work. Simply add reference to the:
- winjs.d.ts
- winrt.d.ts
- lib.d.ts
- jquery.d.ts
You can also use the following code as the frame for a new Windows 8 app:
/// <reference path=”winrt.d.ts” />
/// <reference path=”winjs.d.ts” />
/// <reference path=”jquery.d.ts” />
/// <reference path=”lib.d.ts” />
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
“use strict”;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.addEventListener(“activated”, function (args: WinJS.Application.ApplicationActivationEvent) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll().then(function () {
}));
}
});
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
app.start();
}) ();
To generate the corresponding JS from this TypeScript file, you simply has to SAVE it. As you can see from the example above, there is no special TypeScript code so TS is likely to just convert it directly to .JS
Once you SAVE the .TS file, you will see Web Essentials compiling it to TypeScript Automatically.
This is what you can see from the generated TypeScript code:
You are ready to start coding using TypeScript!
To showcase a simple example of how TypeScript works, we will create a class for Drinks and we will include some properties and methods. As you can see, TypeScript will automatically generate the equivalent in Javascript for you. Remember that you need to SAVE your file (Ctrl-S) to get VS to run the TypeScript compiler on your .TS files. If there are any compilation error, your .JS will simply not be generated. This can be tricky if you have a big project but one quick way to know is that VS will not prompt you to ask you if you wish to get an updated file.
There you go, your project is setup to use TypeScript!
Follow