Angular 基礎部分 1.3 TypeScript簡介

TypeScript

目前的Angular4是基於TypeScript語言，一種類似於JS的語言。
TS和ES6的關係如下圖

目前（2017），仍有少量瀏覽器不支持ES6和TypeScript,爲了保證幾乎所有的瀏覽器支持。
Angular會把TypeScript轉化成ES5。 這個轉化器由TypeScript核心團隊負責。
但是ES6轉ES5的轉化器，有兩個主要團隊在做，谷歌的traceur，JS社區的babel。

TypeScript是谷歌和微軟的合作項目，由兩個重量級團隊長期支持。

Angular2是可以使用ES5的。那爲什麼Angular要全面使用TypeScript呢？有如下原因。

Types

TS對比ES6的一個重大提升就是 類型（typing）。

比如：

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

在ES5中，需要先用var fullName:string 定義變量類型
但在TS中，greetText(name: string)， 可以直接定義類型，函數接受arguments爲name,同時定義對應的類型爲strig
後面的冒號: string { 表示return的類型必須是string，這樣的好處是：1，如果輸入其他類型，會報錯，2，其他開發者會清楚這個返回值。

function hello(name: string): string {
    return 12;
}

會報錯因爲返回12，要求返回類型是string

TSUN (TypeScript Upgraded Node) 把TS在終端輸入爲node格式，

內置類型

string
var fullName: string = ‘Nate Murray’;
Number
var age: number = 36;
Boolean
var married: boolean = true;
Array
因爲array是一個集合，需要定義集合內部的數據類型
可以通過Array或者type[]，常見加[]就是數組。
比如
var chickens: Array<number> = [1, 2, 3];
var chickens: number[] = [4, 5, 6];
Enums 枚舉
格式爲：命名+數值，通過名稱查出數值，

如下，只設置命名
enum Role {Employee, Manager, Admin};
var role: Role = Role.Employee;
輸出爲0，因爲Employee空值

設置命名+空值

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

可以通過Role[],快速查看對應值。
enum Role {Employee, Manager, Admin};
console.log('Roles: ', Role[0], ',', Role[1], 'and', Role[2]);

Any
變量默認類型，可以爲任何類型，

Void
沒有任何類型，通常用於函數中不設置返回值。

不設置返回類型和返回，則是void,不設置返回類型，則是any

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

classes

在ES5中，沒有class,主要用原型鏈，爲了彌補這個缺陷，JS社區用了[ Mozilla Developer Network’s JavaScript Guide](https://developer.mozilla.org/en- US/docs/Web/JavaScript/Guide)和[Introduction to Object-Oriented JavaScript](https://developer.mozilla.org/en- US/docs/Web/JavaScript/Introduction_to_Object- Oriented_JavaScript)

在ES6中，class被正式引入

class可以包含properties, methods, and constructors。

properties

屬性本質上就是class的數據組，
比如

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

methods

方法就是對一個對象的函數

class person{
  ...
  greet() {
    console.log("Hello", this.first_name);
  }
}

constructors

創建一個新對象的默認值，就是JS原型鏈的constructor。
新實例的默認值。
必須命名爲constructor，每一個class只能有一個，默認會自動生成，爲空值

比如:

class person{
  ...
  constructor(first_name: string, last_name: string, age: number) {
    this.first_name = first_name;
    this.last_name = last_name;
    this.age = age;
  }
}

這樣就可以直接創建對象
var p: Person = new Person('Felipe', 'Coury', 36);

繼承 Inheritance

JS中的原型鏈概念
TS繼承自ES5，通過extends來實現繼承
class TabbedReport extends Report {

Utilities

ES6擴展了語法，兩個重要的就是
1箭頭函數 Fat Arrow Functions
2模版字符串

基本上就是ES6語法的特點