DavidSpot Blog

Developer, super curious, a dog lover, sports fan and techie guy


Exploring TypeScript

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.

hello-typescript-world-new-solution

The default application looks as follows

default-code-generated

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

clip_image001

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 

cdode-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:

type-safety

- 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.

lambda-expressions

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/

modules

Inheritance

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

inheritance

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. 

lack-of-typecasting

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. 

Happy TypeScripting!!!