學習Angular前瞭解下TypeScript

Angular2對比於Angular1就像是Java與Javascript，正由於變化巨大，用AngularJS來表明1.x版本，而Angular表明2.x、4.x、5.x等後續版本。參考《Angular權威教程》記錄一下Angular家族史，本文簡介一下TypeScript。

原文連接

TypeScript

Angular是用一種相似於JavaScript的語言--TypeScript構建的。
TypeScript並非一門全新的語言，而是ES6的超集。全部ES6代碼都是徹底有效且可編譯的TypeScript代碼。

TypeScript相對於ES5有五大改善：

• 類型
• 類
• 註解
• 模塊導入
• 語言工具包

類型

TypeScript的類型是可選的。
不過，類型檢查的好處在於：
1 有助於代碼的編寫，在編譯期預防bug
2 有助於代碼的閱讀，清晰的表達做者意圖

字符串

字符串包含文本，聲明爲string類型：

var name: string = 'hello world!';

數字

不管整數仍是浮點，在TypeScript中，全部數據都是用浮點數表示：

var age: number = 25;

數組

數組用Array類型表示，由於數組是一組相同數據類型的集合，因此還須要爲數組中的項目指定一個類型

var arr: Array<string> = ['component', 'provider', 'pipe'];
    或
var arr: string[] = ['component', 'provider', 'pipe'];

var arr: Array<number> = [1, 2, 3, 4, 5, 6];
    或
var arr: number[] = [1, 2, 3, 4, 5, 6];

枚舉

枚舉是一組可命名數值的集合，

enum Man {age, iq, eq};
var man: Man = Man.age;

任意類型

若是沒有爲變量指定類型，那它的默認類型就是any，any類型的變量可以接收任意類型的數據

var something: any = 'hello world';
something = 1;
something = [1, 2, 3];

"無"類型

void表示不指望那裏有類型，一般用做函數的返回值，表示沒有任何返回值

function setName(name: string): void {
    this.name = name;
}

void類型也是一種合法的any類型

類

es5中採用的是基於原型的面向對象設計，並不使用類，而是依賴於原型
在es6中可使用class表示內置的類，如：

class Point {
}

類能夠包含屬性、方法以及構造函數

屬性

屬性定義了類實例對象的數據，如：Point類中能夠有x、y屬性
類中的每一個屬性均可以包含一個可選的類型，如：

class Point {
    x: number;
    y: number;
}

方法

方法是執行在類對象實例上下文中的函數，在調用對象的方法前，要有這個對象的實例

class Point {
    x: number;
    y: number;

    moveTo(x: number, y: number) {
        this.x = x;
        this.y = y;
        console.log(this.x, this.y);
    }
}

var p: Point = new Point();
p.x = 1;
p.y = 1;
p.moveTo(10,10);

構造函數

構造函數是當類進行實例化時執行的特殊函數，一般會在構造函數中對新對象進行初始化
構造函數必須命名爲constructor，由於構造函數在類被實例化時調用，因此能夠有輸入參數，但不能有返回值
當類沒有顯式定義構造函數時，將自動建立一個無參構造函數

class Point {
}
var p = new Point();

等價於

class Point {
    constructor() {
    }
}
var p = new Point();

帶參構造函數

class Point {
    x: number;
    y: number;

    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }

    moveTo(x: number, y: number) {
        this.x = x;
        this.y = y;
        console.log(this.x, this.y);
    }
}    
var p: Point = new Point(1,1);
p.moveTo(10,10);

繼承

面向對象的另外一重要特性就是繼承，繼承代表子類可以從父類獲得它的行爲，而後能夠在這個子類中重寫、修改或添加行爲
TypeScript完成支持繼承特性，用extends關鍵字實現

建立父類

class Parent {
    name: string;

    constructor(name: string){
        this.name = name;
    }

    say() {
        console.log('NAME:' + this.name);
    }
}

子類

class Child {
    age: number;

    constructor(name: string, age: number) {
        super(name);
        this.age = age;
    }

    say() {
        super.say();
        console.log(' AGE:' + this.age);
    }
}

var n: Child = new Child('vist', 25);
n.say();

總結

在TypeScript和ES6中還有不少優秀的語法特性，序幕纔剛剛拉開。