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!

JavaScript Tips

JavaScript is one of the most used languages on client-side, most of the websites you know contains some JavaScript code even if it’s not so important. Nowadays, this use exploded, especially with the introduction of MV* frameworks on client-side such as BackboneJS or AngularJS, etc. In this post I’ll speak about some JavaScript tips that I learned in my carreer. I’m not a JavaScript specialist, so your comments are welcome.

1. Global variables

Don’t forget to use the var keyword when declaring variables, because if you don’t do, this will be interpreted as a global variable and this is not a good habit because it will make the debugging more difficult.

2. Testing equality

Try always to use === instead of == when testing equality, because === operator evaluates both type and the value

if(1 === '1') //Returns false
if(1 == '1') //Returns true

if(0 === '') //Returns false
if(0 == '') //Returns true

Note that this is the same advice for inequality operators != and !==

3. Semicolons

Always include all semicolons, why ? Because when you didn’t do it, the browser will do it for you where he thinks that is the best and necessary place. So imagine what could be the results.

4. Blocks

Like in C programming language, It’s preferred to use the K&R style of formatting for block quotes. This format starts the opening curly brace on the same line as the preceding line of code. Below, an example:

if(debug === true) {
   console.log('DEBUG mode is enabled');
} else {
   console.log('DEBUG mode is disabled');
}

Furthmore, you should always use explicit blocks. So it’s not appreciable to write the below code

if (i < 10)
    do_something(i);

Instead, write:

if (i < 10) {
    do_something(i);
}

5. Variables declaration

One of the most strange notions in JavaScript that encounters developers coming from C-family languages is the fact that variables is hoisted: variables are available before declaration. It’s strange ! This is due to the interpreter’s strategy. The interpreter starts with scanning code and retrieving all declarations, it executes code line by line. This is why the below code does not throws any error:

console.log(my_variable);
//Outputs: undefined

var my_variable = "Hello World!";
console.log(my_variable);
//Outputs: Hello World!

So, the interpreter scans the code, and collect all declared variables and put them in the concerned scope, then it executes the code. In our case my_variable is declared but it’s not yet initialized until the 4th line. This why the output was undefined for the first time.