TypeScript入門-接口

學習Angular 2 ， 《揭祕Angular 2》讀書筆記。Angular2 選擇 TypeScript 做爲其官方最主要的構建語音，這意味着掌握 TypeScript 語音將更有利於高效地開發 Angular 應用。

接口

接口在面向對象設計中具備極其重要的做用，TypeScript 接口的使用方式相似於 Java，同時還增長了更靈活的接口類型，包括屬性、函數、可索引和類等類型。

屬性類型接口

在 TypeScript 中，使用 interface 關鍵字來定義接口。示例代碼以下：

interface FullName {
    firstName: string;
    secondName: string;
}

function printLabel(name: FullName) {
    console.log(name.firstName + " " + name.secondName);
}

let myObj = {age: 10, firstName: 'Wu', secondName: 'Weisen'};
printLabel(myObj);

上例中接口 FullName 包含兩個屬性：firstName 和 secondName,且都是字符串類型，這裏有兩點須要注意：

• 傳給 printLabel() 方法的對象只要「形式上」知足接口的要求便可，例如上例中對象 myObj 必須包含 firstName 和 secondName 屬性，且類型都是 string，即便有多出的屬性也不會報錯。

• 接口類型檢查不會去檢查屬性順序，可是屬性的必須存在且類型匹配。

TypeScript 還提供了可選屬性，可選屬性的接口定義與普通接口的定義方式差很少，咱們只需在可選屬性變量名後面加一個?符號，示例代碼以下：

interface FullName {
    firstName: string;
    secondName?: string;
}

function printLabel(name: FullName) {
    console.log(name.firstName + " " + name.secondName);
}

let myObj = {firstName: 'Wu'};    // secondName 是可選屬性，能夠不傳
printLabel(myObj);

函數類型接口

接口除了描述帶有屬性的普通對象外，也能描述函數類型。定義函數類型接口時，須要明肯定義函數的 參數列表 和 返回值類型，且參數列表的每一個參數都要有 參數名 和 類型。示例代碼以下：

interface encrypt {
    (val: string, salt: string): string
}

上邊已經定義好了一個函數類型接口 encrypt，如今，咱們來看看如何使用函數類型接口。

let md5: encrypt;
md5 = function(val: string, salt: string){
    console.log("orgin value:" + val);
    let encryptValue = /** 代碼略 **/;
    console.log("encryptvalue:" + encryptValue);
    return encryptValue;
}
let pwd = md5('password', 'Angular');

對於函數類型的接口要注意如下兩點：

• 函數的參數名：使用時參數個數與對應位置變量的數據類型都必須保持一致，參數名能夠不同。

• 函數的返回值：函數的返回值類型必須與接口定義的返回值保持一致。

可索引類型接口

可索引類型接口用來描述那些能夠經過索引獲得的類型，例如 userArray[1]、user、Object["name"]等。它包含一個索引簽名，即經過特定的索引來獲得指定類型的返回值。示例代碼以下：

interface UserArray {
    [index: number]: string;
}

interface UserObject {
    [index: string]: string;
}

let userArray: UserArray;
let userObject: UserObject;

userArray = ['張三', '李四'];
userObject = {'name': '張三'};

console.log(userArray[0]);    // 輸出：張三
console.log(userObject['name']);    // 輸出：張三

索引簽名支持字符串和數字兩種數據類型。而當使用數字類型來索引時，JavaScript 最終也會將它裝換成 字符串類型 後再去索引對象，如上例中，如下寫法都是同樣的：

console.log(userArray[0]);    // 輸出：張三
console.log(userArray["0"]);    // 輸出：張三

類類型接口

類類型接口用來規範一個類的內容，示例代碼以下：

interface Animal {
    name: string;
}

class Dog implements Animal {
    name: string;
    constructor(n: string) {}
}

咱們能夠在接口中描述一個方法，並在類裏去具體實現它的功能，示例代碼以下：

interface Animal {
    name: string;
    setName(n: string): void;
}

class Dog implements Animal {
    name: string;
    setName(n: string) {
        this.name = n;
    }
    constructor(n: string) {}
}

接口擴展

和類同樣，接口也能夠實現相互擴展，即能將成員從一個接口複製到另外一個裏面，這樣能夠更靈活地將拆分到可複用的模塊裏面，示例代碼以下:

interface Animal {
    eat(): void;
}

interface Person extends Animal {
    talk(): void;
}

class Programmer {
    coding(): void {
        console.log('wow~')
    }
}

class ITGirl extends Programmer implements Person {
    eat(){
        console.log('animal eat');
    }
    
    talk() {
        console.log('person talk');
    }
    
    coding(): void {
        console.log('I like coding');
    }
}

let itGirl = new ITGirl();    // 經過組合集成類來實現接口擴展，能夠更靈活複用模塊

itGirl.coding();