Thursday, April 10, 2014

Introduce of TypeScript (Part 2)

Lets continues the topic about TypeScript, I am going to introduce interface, class and module.
Interface
Nothing would change the behavious of JavaScript, but it is good stuff for compiler or IDE to perform type checking. Let's see the example.
interface IVector2D {
    x : number;
    y : number;
}

var a : IVector2D = {x:0, y:0}; // Valid
var b : IVector2D = {x:1, y:1, z:1}; // Valid, fulfill the interface
var c : IVector2D = {x:2}; // Compile error, missing number "y"

var a = { x: 0, y: 0 };
var b = { x: 1, y: 1, z: 1 };
var c = { x: 2 };

With the interface, you are more safe to write some advance function, since compiler or IDE warn you when the type is missmatch. Such as the following example.
function addVector2D (v1 : IVector2D, v2 : IVector2D) : IVector2D {
    return {
        x : v1.x + v2.x,
        y : v1.y + v2.y
    };
}
var d = addVector2D(a, b); // {x:1, y:1}
var e = addVector2D(0, 1); // Compile error

Class
JavaScript is a kind of prototype-based object oriented programing, which is quite different from class-based OOP. Before the next standard of JavaScript (ECMAScript 6) become popular in all browser, TypeScript is the easiest ways to make Class in JavaScript.
class People {
    name : string; // public attribute
    constructor (name : string){ // class constructor
        this.name = name;
    }
    greet () : string { // public method
        return 'Hi, my name is ' + this.name;
    }
}

// Subclass Staff which extends People,
// implements an interface is also possible
class Staff extends People {
    post : string;
    constructor (name : string, post: string){
        super(name); // must call the superclass constructor
        this.post = post;
    }
    greet() : string {
        return super.greet() + ' I am a ' + this.post;
    }
}
var me = new Staff('KiLla', 'Programmer');
console.log(me.greet()); // Hi, my name is KiLla I am a Programmer

Module
For better manage the code, and prevent polluting the globle scrope, module pattern is always recommended for large scale system / library. With TypeScript, you can ECMAScript 6 compliance code very easily.
module mod {
    export var attr : number = 0; // use the "export" keyword, just like nodejs
    export function func() {
    }
}
module mod.submod {
    export class myclass {
    }
}
var a = mod.attr;
var b = mod.func();
var c = new mod.submod.myclass();

Introduce of TypeScript (Part 1)

Previously I just learn something new to me, TypeScript (acutally it first introduced in 2012).
TypeScript is a superset of JavaScript, it preserve all syntax of JavaScript, and with something new (eg. modules, class, interface). By means of compilation, the TypeScript is compiled into JavaScript which is still quite readable.
Actually the Offical Site aready provide very clean introduction and tutorial about the language. So today I would only talk about the typing concept and modules class interface.
As we know JavaScript is weak typing language.

var a = 0;
var b = "0";
var c = false;
a == b && b == c; // true

So TypeScript want to solve this issue by adding strong typing concept to JavaScript

// explicitly tell TypeScript compiler
// what is the type of variable a,b,c
var a : any = false;
var b : number = 0;
var c : string = "0";

// OK code since "a" is in "any" type
a = c;

// Cause compilation error (error TS2011: Cannot convert 'number' to 'string'.),
// but it still preserve in js file because it is valid JavaScript
b = c;

var a = false;
var b = 0;
var c = "0";

a = c;

b = c;

Actually the type is only use for compilation warning, or for IDE to know, it is so clear and beautiful. To be more advance, you can also declare function parameters type and return type.
function func(arg1: string, arg2: string) : Array<string> {
    return [arg1, arg2];
}

function func(arg1, arg2) {
    return [arg1, arg2];
}