Getting Started With TypeScript
Getting Started With TypeScript
Written by Mike James   
Wednesday, 03 October 2012
Article Index
Getting Started With TypeScript
The Type System

There is nothing like the thrill of you first few minutes with a new language and they don't come any newer than Microsoft's TypeScript. Find out what the fuss is about and if there is any point in using it.

TypeScript from Anders Hejlsberg

TypeScript is a JavaScript extension invented by Anders Hejlsberg who has a history of inventing languages which have an impact on the programming community - TurboPascal, Delphi, C# and now TypeScript. For this reason alone the new language deserves your consideration even if you finally decided that you can live without it.

So let's take a programmer's look at TypeScript. It is assumed that you know JavaScript and know something about using Visual Studio. It also assumes that you are interested in what makes a language a good language.

Before we get into the details of the language, we take a small detour into using it in Visual Studio. If you are only interested in the language then skip this section.

Visual Studio

Getting started is fairly easy. You can just download the compiler and use any text editor you like but the easiest way to get to know TypeScript is via Visual Studio and the special addin. The bad news is the addin doesn't support Visual Studio 2010; the good news is that it does work with the free Visual Studio Express 2012 for Web.

What all this means is that the simplest way to get a taste of what TypeScript is all about is to first download Visual Studio Express 2012 for Web and next install the Visual Studio plug in -

Notice that this works on Windows 7 or Windows 8. If you want to try it with an earlier version then its the command line compiler and a text editor for you or point your browser at the TypeScript Playground where you can try small chunks of code out.


Once you have both installed you can start Visual Studio running and you should discover a new project type HTML Application with TypeScript in the Visual C# section. If you don't see it, and it seems to only appear after a full re-boot, then search for it (use the search box) and it should appear.




You will also discover that it supports a new file type - TypeScript ending in .ts.  Use the File, New File and select Script and TypeScript File to add TypeScript to an existing project.

If you start a new HTML TypeScript project you will discover that it creates a TypeScript file called app.ts and an HTML file called default.htm which loads the JavaScript file app.js. The idea is that when you build the project all .ts files are complied to .js files of the same name which you use in the HTML part of the project.

Three Key Language Ideas

For a new language, TypeScript doesn't add much to JavaScript - it is a very minimal extension. Its creator, Anders Hejlsberg, is well known for advocating strongly typed languages and TypeScript is an attempt to impose some of this discipline on what you might see as the indiscipline of JavaScript. Before going on to explain the solution lets take a quick look at the problem.

JavaScript is a weakly typed dynamic Lange. This means that you can create objects at runtime and methods and properties to them whenever you like. This means that objects don't have a type and there is no type hierarchy of the sort you get with a class based strongly typed language like Java or C#.

This is what many programmers converting to JavaScript find so terrible about it - objects are dynamic things which change what they can do as the program runs. It is arguable that once you understand this JavaScript becomes a much more powerful language than class based static languages and with a few good techniques it can be safe and maintainable. If you are of this opinion, then TypeScript is in for a rough ride because it aims to add type into the language.

There are three basic ways it does this.

  • The first is that it introduces the module which allows you to encapsulate code in such a way that name collisions are avoided. It is essentially a cross between encapsulation and a namespace.

  • The second is a standard class and inheritance based way of creating objects. You can define classes that inherit from other classes and instansiated objects using them.

  • The third and final is the most radical. The type system that TypeScript introduces is partly based on type inference and some manual, optional, type annotation but the key introduction is the interface. TypeScript uses the interface to define an objects type. The interface creates a type system for objects.

A quick summary of the three key ideas makes it clear that this is a very small change to JavaScript and that the class and module facilities are based on the upcoming JavaScript revision in Ecmascript 5. If you don't like them then you wont like the next version of JavaScript either!

Notice that you wont find any great language additions to give you amazing new powers - everything else is left as it was in JavaScript and not much else is added.

Perhaps the fourth key idea, although it isn't exactly a language feature, is that all of JavaScript is TypeScript. You can write any valid JavaScript and expect it to work. This is both a huge strength and a fundamental weakness of TypeScript as a JavaScript object can mutate into something else at runtime the compile time type checking imposed by TypeScript isn't 100% secure.

JavaScript is a little tamed by TypeScript but it can still get out of the box if it feels the need to.

As TypeScript IS JavaScript it is still possible to make a mess of things.

Another key idea is that the translation from TypeScript to JavaScript should be as understandable as possible. For this reason the class and module constructs translate to well known JavaScript idioms. In short if you want to use TypeScript's approach to module and class in pure JavaScript you can and many programmers already do. All of the type information is stripped out of the compiled JavaScript code and the type checking is a compile time only feature. 

Now lets take a closer look at each of the features.

Of the key ideas the module and the class are perhaps the simplest and hence least interesting but we need to know about them to describe the type system  so let's begin with the module and then look at class.

If you are happy with the ideas of module and class simply jump to the section in the type system which is the real meat of TypeScript.

Last Updated ( Sunday, 08 May 2016 )

RSS feed of all content
I Programmer - full contents
Copyright © 2018 All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.