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.

?

TypeScript source code

1 2 3 4 5 6 7 8

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"

?

TypeScript compiled code

1 2 3

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.

?

Complex function with interface

1 2 3 4 5 6 7 8

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-based OOP example

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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 example

1 2 3 4 5 6 7 8 9 10 11 12

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.

?

JavaScript weak typing

1 2 3 4

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

?

TypeScript source code

1 2 3 4 5 6 7 8 9 10 11 12

// 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;

?

TypeScript compiled code

1 2 3 4 5 6 7

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.

?

TypeScript source code

1 2 3

function func(arg1: string, arg2: string) : Array<string> {     return [arg1, arg2]; }

?

TypeScript compiled code

1 2 3

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