Hello TypeScript – Getting Started

Tweet

A first look at TypeScript and what it takes to get started with the newest language on the block from Microsoft using Visual Studio 2012.

What is TypeScript?

October 1, 2012 will probably be remembered in the history of Software Development when Microsoft Technical Fellow and father of C# Anders Hejlsberg announce TypeScript, a new Type conformant JavaScript. A language that compiles down to plain JavaScript but on its own has all the hallmarks of a language with first class tooling support in Visual Studio. If you have an hour to spare, go through Anders introduction, you’ll love it. If not, go through this article and you’ll get the gist. Bottomline, don’t start ranting too soon. TypeScript has a lot to offer.

Getting Started

Microsoft has made it really easy to get started with TypeScript. You have an online web-based code editor cum compiler. They also have a Visual Studio 2012 plugin that works on the Professional and above editions. Since a lot has been made about the benefits of ‘tooling’ while introducing TypeScript, we will download and install the TypeScript plugin.

Note: TypeScript is available in Sublime Text, Vi, Emacs editor

Once the Plugin is installed, start Visual Studio, find the Html Application with TypeScript. Strangely enough it goes under the Visual C# category hence it took a minute to find.



The default application looks as follows



The app.ts file is the Typescript file and the app.js is the compiled output file. Fact is app.js is compiled from TypeScript on each compile. If you run the app as is, it will open up a browser and show a page with a ticking timer

Digging a little

With the default app running now let’s look at the TS code and JS code it compiles to, side-by-side



Amazingly for this little snippet, the number of lines of TS code and the number of JS code is identical!

Now let’s try to understand the TS code a little.
- As C# or VB.NET developers, we are familiar with the class keyword. So we are creating a class called Greeter to start off with.
- Next we are declaring three variables, element, span and timerToken. Here the type definition is a little different from C# as in the Type is annotated after the variable name separated by a colon(:) instead of the C# style [typeName] [variableName] (e.g. String myName;).
- So the variable element is of type HTMLElement
- The variable span is of type HTMLElement
- The variable timerToken is of type number

Here the most significant thing is if you try to assign a string to the timerToken, you immediately get type mismatch feedback as seen below:



- Next noteworthy thing is ‘scoping’ of this keyword. As you can see inside a class this refers to the scope inside the class only. So when you say this. in typescript only the variables in the scope of the class light up. As you see in the JavaScript counterpart, this is being saved in _this and used further.
- Next we have ‘Lambda’ expressions for anonymous functions. A little superfluous but they the  C# geek inside me loves it.

Other Goodies

NameSpaces

Other goodies include support for ‘namespaces’ using the module keyword. The below example is from the ‘Modules’ walkthrough on http://www.typescriptlang.org/Playground/.

Inheritance

As of now, simple Inheritance is supported in TypeScript. The following example again shows the sample from the TypeScript site.



As seen above, in JavaScript, inheritance is implemented using ‘composition’ where the base ‘class’ is passed as a variable in the constructor.

Signing Off

The one thing I didn’t find yet was typecasting. For example I can’t typecast a Button retrieved using
document.getElementById(…) from a HTMLElement into a HTMLButtonElement.



As a budding language, I am sure the constructs will appear.

In the coming days, we will work more on TypeScript and develop a more complete application using TypeScript to understand it better.

That was a very quick a brief introduction to TypeScript. Microsoft’s newest language. Did it get you excited?

I believe it presents a very nice middle ground for typed language developers who have worked in C# and VB.NET but have been on the fence regarding JavaScript. What do you think?

Happy TypeScripting!!!

Download the source code here (click on Zip to download as .zip)

Tweet