Steven Edouard

Developer Advocate. Tech Enthusiast. Life Enthusiast.

NAVIGATION - SEARCH

Typescript: My Windows 8 App Experience

I decided to take a peek at the new javascript-compiling language TypeScript released by Microsoft (in a preview state) in late 2012. Basically, Typescript brings some static validation to application developers similar to languages like C#, Objective-C, C++ etc. As my disclaimer describes above I'm not too familiar with JavaScript, so naturally I decided to tackle TypeScript and JavaScript at the same time :-).

 

I have an existing Cloud app called GiftMe (giftmeapp.cloudapp.net) exposed over a RESTful interface (written with ASP.net Web API). I decided it would be good to write an installed app for Windows 8.1 and even more so, writing a HTML5/Javascript app with TypeScript.

 

                        

 

I was able to actually implement and submit the app to the store in 3 days (granted, the app is simple, it has the same feature set as the Web version). You can download GiftMe for Windows 8.1 here:

http://apps.microsoft.com/windows/app/giftme/e49f0934-56e4-427c-90a6-cc068bc428b4

 

You can also find the GiftMe client app source code here:

 

https://github.com/sedouard/GiftMeWin8

 

GiftMe will allow you to sign in exclusively with Facebook and collect information about your friends to provide you with customized gift suggestions for those friends. The client application calls the web service to search for friends, and get gift suggestions for them.

 

This post is primarily about my experience using TypeScript and not too much about my experience specifically with Windows 8.1 WinJS/HTML5 app development (that'll come in a later post).

 

TypeScript Wins:

 

-Awesome VS Intellisense Integration

-Use javascript (when you want to)

-Very easy language to pick up

 

TypeScript Shortcomings:

 

-Type Definitions not always in sync with Javascript libraries

-No Typescript debugging in Visual Studio

-Getting setup with VS was quirky

 

 

Very easy language to pick up

 

Typescriptlang.org has a lot of great examples and understanding TypeScript syntax is really a breeze. If your coming from javascript, c# or c++ you'll find it pretty easy. For example here's a definition I have for the GiftMe client libarary:

 

 

Coming from C# there are some minor differences, such as typenames coming after variables but these are really easy to pick up. The above example explicitly defines a class with a member variable, constructor and instance method with defined typed parameters. Doing this in pure JS is really sort of awkward in my opinion.

 

You can also create interfaces (for example, for a particular JSON object):

 

 

Typescript interfaces are almost the same as traditional interfaces in strongly typed languages except one cool thing you can do is use it to define JSON objects. I found this pretty handy and actually didn't end up implementing any of the interfaces you see above explicitly.

Interfaces are what '*.defintelytyped.ts' files use to give types to common libraries such as jQuery. You can find these on Nuget or Github. This allows you to use typescript on popular, already existing javascript libraries. Creating 'typings' like this makes it very easy to create an excellent intellisense experience similar to .NET and C++.

 

Awesome VS Intellisense Integration

 

Extending from the previous point intellisense is much better when you have types:

This is the 'bread and butter' feature of Typescript. Coming from .NET development, it always makes me feel uneasy calling api's where all the parameters are just 'var'. How do I know I'm passing the right thing? This really solves that problem.

Although JavaScript intellisense files help out with standard libraries, it doesn't give you that rich type information that you need to be productive. This is almost reason alone to jump to TS.

 

Use javascript (when you want to)

 

This has to be one of the best things about the language. Because Typescript compiles down to javascript you can use javascript almost anywhere you want.

 

 

Here's an example of calling one of the GiftMe client library apis passing a callback with the Typescript lambda expression.

 

 

Now here's the same thing using the javascript 'function' keyword. Notice how VS and typescript understand the types of succeed and results.

 

This behavior is really good because when you look up example code in javascript, you can easily bring it right into your Typescript and optionally "type it out" if you want to. It also allows you to take as much or as little Typescript into your project at once. Overall I found this to make things very flexible to fit my needs.

 

No TypeScript debugging in Visual Studio!!!

 

 

 

I gotta say, I was really disappointed when I realized the Typescript sdk didn't let you debug in Typescript.

 

This has to be the BIGGEST drawback. As an app developer, to complete the experience in any programming language, you should be able to debug that code directly, not only its compiled form (javascript). Trying to lay a breakpoint down in a typescript file fails to bind because the Typescript code is never associated with the code running in the javascript engine.

 

Granted, there are posts online about how you can use some compiler generating mappings between javascript and Typescript to debug in Firefox/Chrome/IE but you can't do this in Visual Studio with a Windows 8 WinJS app.

 

 

For the purposes of GiftMe, it wasn't too much of a big deal to just debug the javascript (partially because a lot of the giftme typescript has javascript in it, see Use javascript when you want to).

 

This would lead to one common mistake I made at least two dozen times. When you debug in javascript, you want to make your fixes in javascript. This really pushed me to want to use javascript more without typescript because it almost felt like the typescript compilation step was sort-of 'getting in the way'.

 

 

Type Definitions not always in sync with Javascript libraries

 

One catch that you have to know about TypeScript is that you can't actually use an existing javascript library  (in the Typescript language) without a typescript file called 'defintelytyped'. This file bascially contains all the interface declarations of that library. The problem is is that those interface declarations must keep in sync to the actual javascript. The typescript guys have done a good job of bringing in the community here to help keep popular libraries up-to-date. You can find these libraries on Github or Nuget package manager.

 

Even with these files that are supposed to be up-to-date, I still ran into issues with the build in javascript library for Windows 8:

 

 

In this case I pulled the definatley typed library for WinJS from the official codeplex repository here. Even with what appeared to be the latest file, Visual Studio still reported errors like the one above. You can check the MSDN docs, this api does exist. The code also runs just fine.

Unfortunately this was very prevalent in my entire solution:

 

 

Getting setup was Quirky

 

My setup is VS2013 with the Typescript SDK. I found it very irritating to get typescript setup for a Windows 8.1 app. Unfortunately no Typescript templates exist for Windows 8.1 Javascript/HTML5 apps. In VS2013, Typescript files would always compile javascript on saving which caused 'do you want to reload this file' prompts if I had the .js file opened (which I would because thats the only way to debug). I probably saw the above dialog image hundereds of times which got annoying.

Overall I would say the VS2013 integration experience isn't as stellar as I would have liked it to be.

So... should you use TypeScript?

Although GiftMe is a very small application, it does bring about some obvious advantages and some of the current kinks to Typescript. In general I would say you should definitely consider Typescript if:

-You use Visual Studio for your JS development AND

-You have a large rather complicated application where code maintenance costs are high. (Think about how much bug fixes cost)

 

If you don't fall into that bucket, Typescript is a really good nice to have. You can do without it but it its much nicer to have it. Since any javascript is valid Typescript, if you enable it in your project, you can choose to take as much or as little Typescript as you want in your project. So really there isn't any commitment here.

Hope this helps!

 

 

 

Comments (3) -

Industrial site
United States Industrial site

Really glad I came across this

Reply

Velia Feingold
United States Velia Feingold

Thanks for the great review!

Reply

realmandydee
United States realmandydee

will you care if I tweet your post?

Reply

Add comment

biuquote
  • Comment
  • Preview
Loading