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

Arrow Function Expressions


You can use a short cut to defining a function and this is part of ECMA 6, so it will eventually be in JavaScript. For example

(x)=> x+1;

is equivalent to

function(x){return x+1};

There are other variations on this form.



Once we move beyond primitive types we need to look at the interface.

An interface is a set of type definitions e.g. member definitions without implementations.

For example:

interface myInterface {
    i: number;
    myFunction(x:number) :void;


defines an interface with a public variable i a number and a method myFunction with the specified signature.

Interfaces can extend existing interfaces by using the extends keyword. As interfaces can extend multiple interfaces, there are some rules about what happens when the something with the same name is inherited.

If you define a class so that it implements an interface, this is a promise that the class supports all the methods and properties of the interface. You can then use the interface type to define variables and function signatures etc and only objects that implement the interface can be used. For example

class myClass implements myInterface{
public definitions for i and myfunction

you can now write:

var myObj:myInterface=new myClass();

If myClass didn't implement myInterface then there would be a compile time error.

You can think of declaring a variable as an interface type as a promise that it will support all of the method and properties of the interface.

Now we come to some subtle points. It be of the same type as an interface all that an object has to satisfy is having the required set of members of the correct type and signature. That is even if an object doesn't implement an interface type inference can deduce that it is of that type.  What this means is that types work at compile time much like they do at run-time.

There is even notion of a type hierarchy in TypeScript but it is a very lose and ad-hoc one. A type is a subtype of another type if it contains at least all fo the properties and methods of the supertype. In other words this is a formalization of the JavaScript duck typing. If an object has all of the properties and methods of a type then it can be used in place of that type.

For example if you try:

var test:myInterface = { i: 0};


then the inferred type of the object literal is i:number and you will see an error because myInterface also needs myFunction(x:number) :void;

You can make the assignment work by adding the missing method:


var test: myInterface = {
        i: 0,
         function (x:number) {
          do something }


but you can also add additional methods and properties without triggering a compile time error

var test: myInterface = {
        i: 0,
          function (x:number) {
            do something },

You can do the same thing with interfaces:

For example

interface myDerivedInterface
                extends myInterface {
    j: number;

Now myDerivedInterface is a type that includes all of the methods and properites of myInterface. Objects of type myDerivedInterface can be used in place of objects of type myInterface.

For example:

var test: myDerivedInterface = {
        i: 0,
        function (x: number) {
           do something},
        j: 1

and you can assign test to a variable of type myInterface

var test2:myInterface = test;

Following this you can't access test2.j as this is not a member of myInterface.

If you are familiar with the ideas of base and derived type is is all very obvious. However notice that type in this case is defined as the collection of methods and properties that an object actually has at any given point in the program.

For example

var test: myInterface = {
        i: 0,
        myFunction: function (x: number) {
           do something },

defines an object that has more than is needed to be a myInterface type. However as test is of type myInterface you can't access j which isn't part of the inteface. You can't even assign test to test2 as in:

var test2:myDerivedInterface = test;

because the assignment takes account of the declared types. However, you can use a type assertion, which works very much like a cast in C++ and C#, to force the assignment:

var test2:myDerivedInterface =
             <myDerivedInterface> test;

and now you can get at property j.

Type Libararies

At this point you are probably thinking that types are great, but you have to put in a lot of work if you want to use types with HTML elements and the DOM. The good news is that there are a lot of predefined types included in with the system. There are types for all of the DOM elements and a great many for CSS and other objects. This makes the whole typing system much more useful than it would be if you really did have to start from scratch.


This isn't a verdict because it's too soon to be so definite. After using TypeScript for about a day I quite like some of its type features, but mainly because of how it improves the intellisense prompting. What I find confusing is the closeness to JavaScript. It is too close to get me away from thinking about what is going on behind the scenes. Perhaps I will get over this.

My interim verdict is that the type system doesn't quite give me enough of an advantage over native JavaScript - but perhaps this is because I have learned to work without a type system and a type hierarchy and I like this more flexible approach.  

Useful Links

Visual Studio Downloads

You can download TypeScript from CodePlex: Codeplex

If you want to try out an in-browser version visit: Playground

Sublime, Emacs and Vim support

Related Articles

TypeScript - Microsoft's Replacement For JavaScript




blog comments powered by Disqus


To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.



Master JavaScript Regular Expressions

Regular expressions can seem complex but the biggest reason for this is that most programmers don't take them seriously enough. Spend just a little time finding out how they work and you can do amazin [ ... ]

jQuery 3 - Consuming Promises

Promises are a way of organizing asynchronous calls that is better than using callbacks. The callbacks are still there but they are come with a degree of organization. Previously jQuery was criticized [ ... ]

Other Articles


Last Updated ( Sunday, 08 May 2016 )

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