TypeScript入門(mén)-接口

sewerganger 發(fā)布于2019-08-21 15:32 / 3490人閱讀

摘要：接口類型檢查不會(huì)去檢查屬性順序，但是屬性的必須存在且類型匹配。函數(shù)的返回值函數(shù)的返回值類型必須與接口定義的返回值保持一致。示例代碼如下張三李四張三輸出張三輸出張三索引簽名支持字符串和數(shù)字兩種數(shù)據(jù)類型。

學(xué)習(xí)Angular 2 ，《揭秘Angular 2》讀書(shū)筆記。Angular2 選擇 TypeScript 作為其官方最主要的構(gòu)建語(yǔ)音，這意味著掌握 TypeScript 語(yǔ)音將更有利于高效地開(kāi)發(fā) Angular 應(yīng)用。

接口

接口在面向?qū)ο笤O(shè)計(jì)中具有極其重要的作用，TypeScript 接口的使用方式類似于 Java，同時(shí)還增加了更靈活的接口類型，包括屬性、函數(shù)、可索引和類等類型。

屬性類型接口

在 TypeScript 中，使用 interface 關(guān)鍵字來(lái)定義接口。示例代碼如下：

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 包含兩個(gè)屬性：firstName 和 secondName,且都是字符串類型，這里有兩點(diǎn)需要注意：

傳給 printLabel() 方法的對(duì)象只要“形式上”滿足接口的要求即可，例如上例中對(duì)象 myObj 必須包含 firstName 和 secondName 屬性，且類型都是 string，即使有多出的屬性也不會(huì)報(bào)錯(cuò)。

接口類型檢查不會(huì)去檢查屬性順序，但是屬性的必須存在且類型匹配。

TypeScript 還提供了可選屬性，可選屬性的接口定義與普通接口的定義方式差不多，我們只需在可選屬性變量名后面加一個(gè)?符號(hào)，示例代碼如下：

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

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

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

函數(shù)類型接口

接口除了描述帶有屬性的普通對(duì)象外，也能描述函數(shù)類型。定義函數(shù)類型接口時(shí)，需要明確定義函數(shù)的 參數(shù)列表 和 返回值類型，且參數(shù)列表的每個(gè)參數(shù)都要有 參數(shù)名 和類型。示例代碼如下：

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

上邊已經(jīng)定義好了一個(gè)函數(shù)類型接口 encrypt，現(xiàn)在，我們來(lái)看看如何使用函數(shù)類型接口。

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");

對(duì)于函數(shù)類型的接口要注意以下兩點(diǎn)：

函數(shù)的參數(shù)名：使用時(shí)參數(shù)個(gè)數(shù)與對(duì)應(yīng)位置變量的數(shù)據(jù)類型都必須保持一致，參數(shù)名可以不一樣。

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

可索引類型接口

可索引類型接口用來(lái)描述那些可以通過(guò)索引得到的類型，例如 userArray[1]、user、Object["name"]等。它包含一個(gè)索引簽名，即通過(guò)特定的索引來(lái)得到指定類型的返回值。示例代碼如下：

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"]);    // 輸出：張三

索引簽名支持字符串和數(shù)字兩種數(shù)據(jù)類型。而當(dāng)使用數(shù)字類型來(lái)索引時(shí)，JavaScript 最終也會(huì)將它裝換成 字符串類型 后再去索引對(duì)象，如上例中，以下寫(xiě)法都是一樣的：

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

類類型接口

類類型接口用來(lái)規(guī)范一個(gè)類的內(nèi)容，示例代碼如下：

interface Animal {
    name: string;
}

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

我們可以在接口中描述一個(gè)方法，并在類里去具體實(shí)現(xiàn)它的功能，示例代碼如下：

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

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

接口擴(kuò)展

和類一樣，接口也可以實(shí)現(xiàn)相互擴(kuò)展，即能將成員從一個(gè)接口復(fù)制到另一個(gè)里面，這樣可以更靈活地將拆分到可復(fù)用的模塊里面，示例代碼如下:

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();    // 通過(guò)組合集成類來(lái)實(shí)現(xiàn)接口擴(kuò)展，可以更靈活復(fù)用模塊

itGirl.coding();