Angular學習筆記（1）——TypeScript基礎

TypeScript簡介

TypeScript是ES6的一個超集，ES6是ES5（也就是俗稱的普通的JavaScript）的下一個版本的JavaScript，TypeScript代碼可以通過轉譯器來轉化成ES5代碼（因爲目前支持ES6的瀏覽器也並不是很多，所以TypeScript還是要轉換成相應的ES5代碼在瀏覽器上運行，雖然Angular也提供有ES5 API，但是TypeScript加入的新功能值得我們去使用它）

TypeScript的新特性

TypeScript相比於ES5有五大改善
- 類型
- 類
- 註解
- 模塊導入
- 語言工具包

類型

TypeScript相比於ES6最大的改善是增加了類型系統，比如

var name: string;

• 字符串——string

var name: string = 'Test';

• 數字——number
  在TypeScript中，所有的數字都屬於number類型，整型和浮點都是作爲浮點數來處理的

var age: number = 36;

• 布爾類型——boolean
  TypeScript中使用true和false作爲布爾類型的值

var isRainning: boolean = false;

• 數組——Array/T[]
  數組有兩種表示方式分別爲“Array<類型>”以及“類型[]”

var students: Array<string> = ['John','Tony'];
var students: string[] = ['John','Tony'];

• 枚舉——enum
  類似於java以及C++中的枚舉類型，TypeScript中的枚舉類型也是用enum來聲明，如果不指定枚舉類型的初始值，那麼枚舉中其他項的值會設置爲依次遞增的

enum Computer {Lenovo, Dell, Aser};
var computer: Computer = Computer.Lenovo;

• 任意類型——any
  如果沒有爲變量指定類型，那麼它的默認類型就是any，any類型的變量可以接受任何類型的數據

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

• “無”類型——void
  通常用作函數返回值

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

類

用class關鍵字來定義一個類

class Test{
    ...
}

• 屬性
  屬性就是類中包含的數據，類似於java中類的成員變量的聲明，不過TypeScript沒有訪問權限的聲明，默認爲公有變量

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

• 方法
  方法就是類中包含的成員函數，如果沒有顯示聲明方法的返回類型和返回值，那麼默認爲返回any類型

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

    // 返回void類型，void類型也是一種any類型
    greet() {
        console.log("Hello",this.first_name);
    }

    ageInYear(years: number): number{
        return this.age + years;
    }
}

• 對象的聲明與實例化
  使用new關鍵字實例化一個對象

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

• 構造函數
  當類沒有顯示定義構造函數的時候，將自動創建一個無參構造函數，構造函數必須命名爲constructor，在TypeScript中每個類只能有一個構造函數

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

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

• 繼承
  在TypeScript中使用extends關鍵字實現繼承，跟java中類似的是，子類中要使用super關鍵字來訪問父類中的參數

class Student extends Person{
    studentId: string;

    constructor(fName: string, lName: string, age:number, sId: string){
        super(fName,lName,age);
        this.studentId = sId;
    }
}

工具

ES6和TypeScript提供了許多語法特性，其中最重要的亮點是
-胖箭頭函數語法
-模板字符串

• 胖箭頭函數——=>
  胖箭頭函數用於簡化函數作爲方法參數時的寫法，胖箭頭可以用作表達式和語句

// ES5 code
var data = ['test1','test2','test3'];
data.forEach(function(line) {console.log(line);})

// TypeScript code
var data:string[] = ['test1','test2','test3'];
data.forEach((line) => {console.log(line)});

• 模板字符串
  使用反引號將文本擴起來
  字符串中的變量——在字符串中插入變量，不必用“+”來進行拼接

var firstName:string = 'Nate';
var lastName:string = 'Murray';

var greeting:string = `Hello${firstName}${lastName}`;

多行字符串——用於寫多行字符串

var template = `
<div>
    <h1>Hello</h1>
</div>
`