TypeScript學習: 七、TypeScript的接口（屬性接口，函數接口，類類型接口）

TypeScript的接口

　　接口的作用，在面向對象的編輯中，接口是一種規范的定義，它定義了行為和規范，在程序設計里面，接口起到了一種限制和規范的作用，接口定義了某一批類所需要遵守的規范，接口不關心這些類的內部狀態數據，也不關心這些類里面方法的實現細節，它只是規定這批類必須提供某些方法，提供這些方法的類就可以滿足實際需求，typeScript中的接口類似於java，同時還增加了更靈活的接口類型，包括屬性，函數，可索引和類等

 

屬性接口

　　定義一個普通的函數

function printLable():void{
    console.log("打印Lable");

}
printLable();// 調用方法

　　定義一個帶參數的方法

// 帶參數的方法
function printLable(lable:string):void{
    console.log("打印"+ lable);
}
printLable("我是Lable");// 調用方法

 

   當調用帶參數的方法的時候需要寫入參數內容，而且這個參數的類型被限制為string類型

如果參數類型是json的，我們可以這樣約束， 約束json中必須要有一個id的屬性名稱並且值必須是number類型的

 

如果是要傳入json進行批量處理（比如多個函數要用到，並且每個json都有多個屬性），那么要使用到屬性接口了， 利用接口定義json的規范

interface printJson{
    id:number; // 注意接口使用的分號
    name:string;
    msg:string;
}
function printLable(lable:printJson):void{
    console.log("打印"+ lable.name);
}

printLable({id:1,name:"標簽",msg:"msg"});

 如果我在這個屬性接口里面定義一個接口以外的屬性

再看下面：這樣寫是沒有報錯，但是在函數里面使用不到sex這個屬性

// 提示接口中沒有定義這個sex的屬性

 

簡單了解這個接口屬性之后，再來看看批量方法使用，定義好一個接口后，就可以在多個函數上使用

 

接口的可選屬性定義，添加？號， 這樣使用接口的時候就可以 不用寫入msg 作為參數， 也不會報錯了

函數接口

函數類型接口：約束函數的參數和返回值，使該函數必須要傳入指定的參數，和指定的返回值

//函數類型接口
interface encryct{
    (key:string,val:string):string;
}

var md5:encryct = function(key:string, val:string):string {
    // ------ 加密的操作
    return key + val;
}

var sh:encryct = function(key:string, val:string):string {
    // ---- sh的加密計算
    return key +"----"+ val;
}

md5("name", "張三"); // 調用方法
sh("sex", "boy");

 可索引接口

 　　用於 數組或者對象的約束

typeScript 定義數組

var arr:number[] = [123, 45, 21];

var arr1:Array<string> = ["123", "234"];

 

可索引接口

// 可索引接口

interface UserArr {
    // index 表示數組的索引， 或者對象的key，類型為number， 值約束類型為string類型
    [index:number]:string;
}

var arr2:UserArr = ["aaaa", "bbbb"]; // 定義數組，  索引為number，值為string

console.log(arr2[1]);

 

 可索引接口約束對象

interface UserObj {
    [index:string]:string
}

var obj:UserObj = {"name": "張三"};

 

類類型接口

　　對類的約束， 有點像抽象類， 實際是把屬性接口約束+函數接口約束一起使用

// 定義接口
interface Animal{
    name:string;
    eat(str:string):void;
}

// 實現接口使用 implements 
class Dog implements Animal{
    name:string; // 實現接口的 name屬性

    constructor(name:string) {
        this.name = name;
    }

    // 實現接口的函數
    eat(food:string):void{
        console.log(this.name + "在吃" + food)
    }
}

 

使用類類接口，實現的函數，必須要有，可以不用填寫參數，返回類型必須和接口的一致

 

 接口的擴展

　　接口可以繼承接口

　　實現的時候，必須要實現完所有接口定義的約束

// 定義接口
interface Animal{
    name:string;
    eat(str:string):void;
}

interface Person extends Animal{

    work(workName:string):void;
}

class Web implements Person{
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    eat():void{
        console.log(this.name + "喜歡吃面包");
    }
    work(workName:string){
        console.log(this.name + "在" + workName);
    }
}

var w = new Web("張三");
w.work("送外賣");

 

 類 可以實現接口同時也可以繼承父類

// 定義接口
interface Animal{
    name:string;
    eat(str:string):void;
}

// 接口繼承接口
interface Person extends Animal{

    work(workName:string):void;
}

class Programmer {
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    coding() :void{
        console.log("寫代碼");
    }
}

// extends 繼承父類， implements 實現接口
class Web extends Programmer implements Person{

    constructor(name:string){
        super(name);
    }
    eat():void{
        console.log(this.name + "喜歡吃面包");
    }
    work(workName:string){
        console.log(this.name + "在" + workName);
    }
}

var w = new Web("張三");
w.work("送外賣");
w.coding(); // 調用父類的方法