What is TypeScript?
See http://www.typescriptlang.org
TypeScript was recently released and has become the new hot topic. One of the questions I have asked and heard is can we use this for developing Windows Store Applications with Javascript and have the cool features that have been shown in the videos and examples.
One of the great features was the split window feature where you can code in TypeScript on the left and upon hitting save, it compiles to Javascript on the left. So I fired up a new Javascript Windows Store project in Visual Studio to give it a shot to see if it all works. Before we get started make sure that you have the following:
- Windows 8 & VS2012
- Download the plugin: http://go.microsoft.com/fwlink/?LinkID=266563
- VS 2012 Web Essentials: http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6
Create a New Project
Start by creating a new project. I just went with the "Blank App" template for purposes of this post, but any of the installed templates are certainly applicable.Click "OK" and you will see that in the Solution Explorer the following structure. Expand the "js" folder to see the javascript files that are there by default.
Adding the TypeScript Functionality
There are a couple of files that are needed to making TypeScript and Windows 8 play nicely together, as well as jQuery. The best way to describe these is that they are wrappers for the WinJS, WinRT and JQuery or helpers. There is also lib.d.ts which is a noted in the file as "ECMA Script APIs" Click on any of these to see the source.winjs.d.tswinrt.d.tsjquery.d.tslib.d.tsI downloaded all of these and now put them in a folder called tsWin in the project for referencing in my other ts files.In the examples that have been shown online, by simply adding a .ts file to your project and hitting save; Visual Studio will automatically create the .js file and associate it to the TypeScript file and show the compiled javascript in the split window. However, this is not the case in a Windows Store Application...Yet.But we can still make this all work, here's how.Add a new javascript file to the js folder BUT name it with the extension .ts. I named the file Data.ts. Next, repeat and name the file Data.js. Your solution explorer should look like this now. Note that I also added the tsWin folder and the mentioned files as well.
A Quick Example
So here is a quick example that will walk through the following concepts:Creating a simple classExtending the class through inheritanceUsing Location ServicesRetrieving a static map from Google Maps APIInserting the image control onto the page.Open the data.ts file. We will first create the initial Location class and the MyLocation class in TypeScript and see the output to javascript.TypeScript:///
Content / Package Type
Make sure that all of the TypeScript (.ts) files are marked as None so they are not distributed unnecessarily with your application.
Debugging
You can put break points in the generated .js files and have access to the immediate window, watch etc.
Dependent Files
I like to see the dependent files like I'm used to seeing in other project types (see below). Since this is not built in to the Windows Store functionality with TypeScript yet, here is how to do it.You need to edit the project file. The best way to do this is to use the Power Commands for Visual Studio extension, or browse to it and open in notepad or some other text editor.
PowerCommands for Visual Studio |