I am a language geek so I was more than intrigued with the announcement and release of TypeScript about a month ago from Microsoft. I found out via twitter where almost immediately there were knee jerk reactions by many. It would be false to say the reactions were equally positive and negative; many of the people who have found their way to my twitter list tended to be really cynical in one of two ways: either by saying TypeScript was not CoffeeScript or by claiming that JavaScript was fine and the language invasion was not necessary.

On the topic of “why TypeScript?”, Anders said the following:

I am not a religious C# zealot, I am a language designer...  and when language design problems present themselves, I jump in because I'm fascinated by what you can do with languages and what you can do, for example, with static typing.

I like that mentality. Put aside the hysterics, the affiliations, and all the other emotional stuff. The language is a tool, let’s see what it can do.

So what exactly is TypeScript? For the formal definition, let’s hit Wikipedia:

TypeScript is a free and open source programming language developed by Microsoft. It is a superset of JavaScript, and essentially adds optional static typing and class-based object oriented programming to the language.

If you want my definition which I would hope is more Elvis than Mort in nature, it’s a new language that introduces the things that are useful from static typing to JavaScript. When you write code in TypeScript, the compiler emits JavaScript that reflects your design. The advantage of TypeScript is that you get compiler checking and some of the language features (e.g. interfaces) that make developers productive in statically typed, object oriented environments.

I guess I can say that over time I’ve become less quick with my reactions. I have a lot of strongly held opinions but one thing that has slowed me down is that these opinions develop with use rather than from conceptual understanding or classical education. In order for me to like or dislike I need to sit down and spend some time with what I’m evaluating.

So how to get started with TypeScript? That’s easy:

1. Download the language compiler and SDK.

2. Download the language specification.

3. Once you’ve installed it, you can verify that the compiler is alive and well by opening a command line and typing

tsc –help

If something is amiss here make sure you have the compiler installed and that your PATH includes a reference to the install location.

4. For some high level background, watch Anders Hejlsberg: Introducing TypeScript on Channel 9.

5. For an additional conversation, programmer to language designer style, listen to Hanselman’s interview of Anders.

6. The TypeScript compiler generates JavaScript files. In order to incorporate this into a web project where I could start getting into language features, I did the following:

  • Created a /Script folder with my *.ts TypeScript file.

    FirstTypeScript-Explorer

    I have been writing a deck of cards simulation but I will detail that in a different post. For now let’s start with the greeter.ts file that is provided as a sample: 
    module HelloWorld {  
    class Messenger {  
        repeat: number;  
  
        constructor (public message = "Hello World") {  
            this.repeat = 1;  
        }  
  
        speak() {  
            for (var i = 0; i < this.repeat; i++) {  
                console.log(this.message);  
            }  
        }  
  
        static SayHelloInSlang() {   
            new Messenger("'Sup World?").speak();  
        }  
    }  
  
    var m = new Messenger();  
    m.speak();  
  
    Messenger.SayHelloInSlang();  
}

  • Created a PostBuild Event that ran the TypeScript compiler on my file. Click the image for a full view.

    FirstTypeScript-PostBuild

  • Referenced the emitted JavaScript file in my project. My starting file was greeter.ts so the emitted JavaScript file is greeter.js. Click the image for a full view.

    FirstTypeScript-Reference
  • Run the page and look at your console. You will see the greeting output. If you want to see something a bit more forceful or, if for some reason you are running Internet Explorer, change the console.log into a window.alert in the sample code. Click image for a full view.

    FirstTypeScriptConsole

I’ve been experimenting with TypeScript for a little more than a week and my conclusion to this point is overwhelmingly positive: it’s a nifty language, intuitive for anyone who is used to C# or similarly object oriented languages, and having the compiler is a good benefit. On the downside I find integration and debugging a little clumsy. The debugging story is that I do it at runtime in the emitted JavaScript which I suppose I will get used to. It would be nice to seem together the build process a little better though the post build event seems to do the trick. It would be nice if there was a way I could look at compiler output in this scenario.

In my next TypeScript post I’ll cover my actual experiment (segmented from this post to keep it smaller and focused) which is taken from an old Raganwald interview question post: to design a deck of cards.