Angular：了解Typescript

Angular是用Typescript構建的。因此在學習Angular之前有必要了解一下Typescript。

[ 類型 ]

Typescript增加了類型系統，好處是：

　　1. 有助於代碼編寫，預防在編譯期出現的bug

　　2. 有助於代碼閱讀，更清晰的表現代碼意圖

如：

var name: string = 'Jay';            // 定義一個string類型的變量 name

在聲明函數時，也可以為函數參數和返回值指定類型：

function greetText(name: string): string { return "Hello" + name; }

[ 內置類型 ]

字符串：string

var name : string = 'Felia'

數字：number

var age : number = 36

布爾類型：boolean

var married : boolean = true

數組：Array

可以用Array<type>或者type[]語法來為數組條目指定元素類型：

var jobs : Array<string> = ['IBM' , 'Microsoft' , 'Google']; var jobs : string[] = ['IBM' , 'Microsoft' , 'Google'];

enum

枚舉是一組可命名數值的集合。比如，如果想拿到某人的一系列角色，可以這么寫：

enum Role {Employee, Manager, Admin}; var role : Role = Role.Employee;

默認情況下，枚舉類型的初始值是0。可以調整初始值。

enum Role {Employee = 3, Manager, Admin}; var role : Role = Role.Employee;

枚舉中其他項的值是依次遞增的，這意味着 Role.Manager的值為4，Role.Admin的值為5。

還可以從枚舉的值來反查它的名稱：

enum Role {Employee, Manager, Admin}; console.log('Roles:',Role[0],',',Role[1],'and',Role[2]);

any類型

如果沒有為變量指定類型，那它的默認類型就是any。在typescript中，any類型的變量可以接受任意類型的數據：

var something : any = 'as string'; something = 1; something = [1,2,3];

"無"類型

void 意味着我們不期望那里有類型。它通常用作函數的返回值，表示沒有任何返回值：

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

[ 類 ]

用 class 關鍵字來定義一個類：class Vehicle {  } 。類可以包含屬性、方法以及構造函數。

屬性

屬性定義了類實例對象的數據。比如叫Person的類可能有first_name、last_name和age屬性。Person類的聲明是這樣的：

class Person {
    first_name : string;
    last_name : string;
    age : number;
}

方法

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

如果我們希望問候某個Person，就可以這樣寫：

class Person { first_name : string; last_name : string; age : number; greet() { console.log("Hello", this.first_name); } }

如果沒有顯式聲明過方法的返回類型和返回值，就會假定它可能返回任何東西。

調用greet方法之前，我們要有一個Person類的實例對象：

var p : Person; p = new Person(); p.first_name = 'Felipe'; p.greet();

我們還可以將對象的聲明和實例化縮寫為一行代碼：

var p : Person = new Person();

假設我們希望Person類有一個帶返回值的方法。比如，要獲取某個Person在數年后的年齡，我們可以這樣寫：

class Person { first_name : string; last_name : string; age : number; greet() { console.log("Hello", this.first_name); } ageInYears(years : number) : number { return this.age + years; } } var p : Person = new Person(); p.age = 6; p.ageInYears(12); // -> 18

構造函數

構造函數是當類進行實例化時執行的特殊函數，必須命名為constructor。因為構造函數是在類被實例化時調用的，所以它們可以有輸入參數但不能有任何返回值。

當沒有顯式地定義構造函數時，將自動創建一個無參構造函數：

class Vehicle{} var v = new Vehicle();

它等價於：

class Vehicle { constructor(){ } } var v = new Vehicle(); 

在Typescript中，每個類只能有一個構造函數。

我們可以使用帶參數的構造函數來將對象的創建工作參數化：

class Person { first_name: string; last_name: string; age: number; constructor(first_name: string, last_name: string, age: number) { this.first_name = first_name; this.last_name = last_name; this.age = age; } greet() { console.log("Hello", this.first_name); } ageInYears(years: number): number { return this.age + years; } } 

用下面這種方法重寫前面的例子要容易些：

var p: Person = new Person('Felipe', 'Coury', 36); p.greet();

當創建這個對象的時候，其姓名、年齡都會被初始化。

繼承

繼承表明子類能夠從父類得到它的行為。然后，我們就可以在這個子類中重寫、修改以及添加行為。

繼承是TypeScript的核心語法，並不像ES5那樣要靠原型鏈實現，用extends關鍵字實現。
為了說明這一點，我們創建一個Report類：

class Report { data: Array<string>; constructor(data: Array<string>) { this.data = data; } run() { this.data.forEach(function(line) { console.log(line); }); } } 

實例化這個類，並且調用run方法：

var r: Report = new Report(['First line', 'Second line']); r.run();

  // First line
  // Second line

為了復用Report類的行為，要使用extends關鍵字來繼承它：

class TabbedReport extends Report { headers: Array<string>; constructor(headers: string[], values: string[]) { super(values) this.headers = headers; } run() { console.log(this.headers); super.run(); } } var headers: string[] = ['Name']; var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship']; var r: TabbedReport = new TabbedReport(headers, data); r.run(); 

// First line
// Second line

[ 工具 ]

胖箭頭函數

胖箭頭（=>）函數是一種快速書寫函數的簡潔語法。

var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship']; data.forEach( (line) => console.log(line) ); 

當只有一個參數時，圓括號可以省略。箭頭（=>）語法可以用作表達式：

var evens = [2,4,6,8]; var odds = evens.map(v => v + 1); 

也可以用作語句：

data.forEach( line => { console.log(line.toUpperCase()) }); 

=>語法還有一個重要的特性，就是它和環繞它的外部代碼共享同一個this。

這是它和普通function寫法最重要的不同點。通常，我們用function聲明的函數有它自己的this。有時在JavaScript中能看見如下代碼：

var nate = { name: "Nate", guitars: ["Gibson", "Martin", "Taylor"], printGuitars: function() { var self = this; this.guitars.forEach(function(g) { // this.name is undefined so we have to use self.name 
            console.log(self.name + " plays a " + g); }); } }; 

由於胖箭頭會共享環繞它的外部代碼的this，我們可以這樣改寫：

var nate = { name: "Nate", guitars: ["Gibson", "Martin", "Taylor"], printGuitars: function() { this.guitars.forEach( (g) => { console.log(this.name + " plays a " + g); }); } }; 

模板字符串

ES6引入了新的模板字符串語法，它有兩大優勢：
　　1. 可以在模板字符串中使用變量（不必被迫使用+來拼接字符串）；
　　2. 支持多行字符串。

字符串中的變量

這種特性也叫字符串插值（string interpolation）。你可以在字符串中插入變量，做法如下：

var firstName = "Nate"; var lastName = "Murray"; var greeting = `Hello ${firstName} ${lastName}`; console.log(greeting); // Hello Nate Murray

注意，字符串插值必須使用反引號，不能用單引號或雙引號。

多行字符串

var template = ` <div> 
        <h1>Hello</h1> 
        <p>This is a great website</p> 
    </div> 
`