TypeScript

TypeScript, developed by Microsoft, is a typed superset of JavaScript that compiles to pure JavaScript. It basically supports any browser, any host, any OS. This makes the superset a very interesting technology because it is not likely to be abandoned soon, even more when we know the most anticipated Angular 2 JavaScript framework is going to support it fully and actually it is written on TypeScript and also other javascript framworks like react and Aurelia. The combination of these technologies are going to give JavaScript a huge boost,  Angular backed up by Google and TypeScript backed up by Microsoft sounds really good and puts JavaScript in a really good position

Benefits

As a typed superset of JavaScript it gives some syntax advantage but it will still let you use the usual syntax in JavaScript. JavaScript isn’t strongly typed and it is not very object oriented and this is where TypeScript comes into place. It is an attempt to make JavaScript object oriented and strongly typed in order to put it in line with other more object oriented languages like C# or VB.

Most of the things you can do with TypeScript can be enforced with some custom code you make but this technology will make it easier. For example, in JavaScript you don’t define the type of the variables so, you may assign a value of a string to a variable and then you try to operate with it. This will give you an error but after you have compiled it. Even worse, the operation you may be using can also be used to operate with strings so, the result is not the one you were expecting and you get no errors. When you use TypeScript you define the type of the variables and problem solved.

For example we can write in javascript:

var s="hello"
console.log(s + 90); // output: hello90
s=90;
console.log(s + 90); // output: 180

so what is the type of s? its a variant and if desired type is changed by mistake we get a runtime error

On TypeScript we create the variable with its type:

var s:string;
s="hello";
console.log(s);

s=900; // compile error

The good part of it is that the code is compiled to a clean and standard javascript supported by all browsers

TYPESCRIPT INSTALLATION

TypeScript can be installed through different channels but the most usual ones are via the npm (the Node Package Manager) or by Visual Studio.

If you actually use Visual Studio and you have the 2015 version or the 2013 with Update 2,you already have it installed as it came built-in already. But if for whatever reason you didn’t install it, you can just  download it here.

With the npm you just have to install it in the usual way you install packages with the syntax

npm install -g typescript

CREATING A SAMPLE TYPESCRIPT FILE

Use any text editor of your choice and create a file named greeter.ts. In the official website they encourage to use .ts extensions for TypeScript files, however they are just pure JavaScript so it won’t make any difference if you use the .js extension but if you plan to compile it after this, the resulting file will be a .js one so it is better to keep using the .ts extension for now as to make a difference. After you did it, paste the following code into it:

function greeter(person: string) {
    return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);    

To compile it use the following command:

tsc greeter.ts         

 Creating Classes

class Rectangle {
    width: number;
    height: number;
    rounded: boolean
    constructor (h:number,w:number,r:boolean) {
        this.width = w >=0 ? w : 0;
        this.height = h >=0 ? h : 0;
        this.rounded = r;
    }
    getArea():number {
        return this.width * this.height;
    }
}

var v1=new Rectangle(2,3,false);
console.log(v1.getArea());

In this example we create a simple class , define the class members with types and it looks like all other typed high level languages. If we try to set a wrong type of value to the class member or try to return the wrong type from a method we get a compile time error.

We can allways add a pure JavaScript, so if you have a big project and want to migrate it to typescript it can be done step by step. the resulted javascript for the above class looks like this:

ar Rectangle = (function () {
    function Rectangle(h, w, r) {
        this.width = w >= 0 ? w : 0;
        this.height = h >= 0 ? h : 0;
        this.rounded = r;
    }
    Rectangle.prototype.getArea = function () {
        return this.width * this.height;
    };
    return Rectangle;
}());
var v1 = new Rectangle(2, 3, false);
console.log(v1.getArea());

 You can also create much more with TypeScript (more on that in a future post)

IS TYPESCRIPT USEFUL?

Indeed, it is. Just the fact of creating classes without having to write a lot of code and the use of interfaces makes it worth of a try. It also simplifies JavaScript in many ways and will boost your programming skills in JavaScript. The compiler also adds a great functionality to spot errors before running the program and saving you a lot of time looking for the variable you were not using correctly or many other issues you will be used with JavaScript.

IS TYPESCRIPT A REPLACEMENT OF JAVASCRIPT?

Definitely not. Even though you want to code in TypeScript you should learn JavaScript first. Yes, you may not be using the pure method but if you don’t know it, you are likely to encounter problems in the future. TypeScript is just a superset of JavaScript to make things easier and to let us spot the errors in real time instead of waiting to run the program. The syntax to use in TypeScript is a bit different but that doesn’t mean you should not learn how to do it in JavaScript first.

CONCLUSION

TypeScript is a great tool by Microsoft and it is Open Source. The fact that Angular 2 JavaScript framework is written on it and it is going to give full support in the beginning puts this technology in a great place to be because it is backed up by two of the major software companies in the world. The community around it is growing rapidly and it is expected it will grow even more once the most anticipated Angular 2 is released.

The functionality is great and it adds up a good deal of tools that will help us in the development of programs in JavaScript but don’t forget you are still coding in JavaScript; no matter you are using it.