TypeScript

Personally, I think that the most awesome Microsoft innovation in the web is the TypeScript language. TypeScript is an interesting  evolution of JavaScript. Indeed, TypeScript is for JavaScript much like what C++ was for C back then. It defines a superset and powerful facilities for the JavaScript language, which make developer life easier.

Installing TypeScript on Linux

Nothing special here, TypeScript is delivered as a Node.js module

sudo npm install -g typescript

Why TypeScript ?

TypeScript is a strongly-types superset of JavaScript. In other words, it improve the syntax of your JavaScript code.  TypeScript encourages declarative programming which we miss with JavaScript which we’ll discuss further in the rest of this tutorial.

In the other hand, Angular 2 was fully written in TypeScript and it’s developed by Microsoft. Thus, it becomes the core front-end language for the major tech companies in the world. This let me think that it’ll be probably the standard for front-end development in the incoming years.

1. Type annotation

TypeScript support most basic types you would expected in any language: boolean, number, array, etc.

var isRuning: boolean = false;
var height: number = 6;
var status: string = "stopped";
var myList: number[] = [1, 2, 3];

A helpful addition to the standard set of datatypes from JavaScript is the ‘enum‘ type.

enum Color {White, Red, Green, Blue, Purple, Black};
var c: Color = Color.White;

TypeScript also added a new type Any, as its name indicate it describe a variable which you have no idea about its type at the time of writing code. For this type we have not any type-checking.

var nonTyped: any = True;
nonTyped = "Maybe a string instead";

2. Interfaces

In real world, we need to represent more complex types (aka records). For this purpose, TypeScript define the interface keyword. Below an example from the official intro tutorial (which you can find here):

interface Person {
 firstname: string;
 lastname: string;
}

function greeter(person : Person):string {
 return "Hello, " + person.firstname + " " + person.lastname;
}

let user = {firstname: "Jane", lastname: "User"}

document.body.innerHTML = greeter(user);

In the above code, we defined an interface Person and a function greeter which
accept an object person which should implements the Person interface and returns
a string. In other words, the person object should have firstname and lastname properties.

3. TypeScript and OOP

TypeScript comes with awesome batteries that makes OOP easier for developers and manage browser-compatability for you. Below, a simple example:

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    whois() {
        return this.name;
    }
}

var person = new Person("John Doe");
console.log(person.whois())

As you see, the syntax is easy to understand; especially if you know Java or C#.

3.1. Inheritance

In addition to being able to define custom classes, you can also extend it by using extends reserved keyword. Below an example:

class Person {
  firstName: string;
  lastName: string;

  fullName(): string {
     return this.firstName + ' ' + this.lastName;
  }
}

class Student extends Person {
  major: string;
}

class Teacher extends Person {
  salary: double;
}

In this example; the Student and Teacher class inherits from the Person class.
As a result, it has access to firstName and lastName properties and to th fullName
method.

3.2. super

super is a reserved typescript keyword, which give you the possibility to call the parent method from child instance. Below an example

class Base {
    log() {
      console.log('hello world');
    }
}

class Child extends Base {
    log() {
      super.log();
    }
}

4. Typings

Geerally, we use 3rd-party libraries in our projects, like jQuery / angular.js and TypeScript expect a declaration file— denoted by a .d.ts extension —  where it can find the API definition of your library. In this stage you should know about the gigantic DefinitelyTyped repo, where you’ll find declaration of almost all JavaScript libraries. We won’t go into too much detail here, but if we wanted to use underscore types, for example, we could simply go typings install underscore --save and have them downloaded into a path defined in typings.json. After that, you could use underscore’s type definitions anywhere in your project simply by including this line:

/// <reference path="underscore/underscore.d.ts" />

5. Conclusion

TypeScript is an interesting push toward improving on JavaScript’s shortcomings by introducing a static typing system, complete with interfaces and type unions. This helps us write safer, more legible and declarative code.

Do you fill that you’ll use TypeScript in your next project ? Do you think that it’ll be the future of JavaScript ? Or do you think that it’ll fail ? Let me know what you think below!