typescript - 5.接口

接口的做用：
在面向對象的編程中，接口是一種規範的定義，它定義了行爲和動做的規範，在程序設計裏面，接口起到一種限制和規範的做用。接口定義了某一批類所須要遵照的規範，接口不關心這些類的內部狀態數據，也不關心這些類裏方法的實現細節，它只規定這批類裏必須提供某些方法，提供這些方法的類就能夠知足實際須要。 typescrip中的接口相似於java，同時還增長了更靈活的接口類型，包括屬性、函數、可索引和類等。

定義標準。

屬性類接口

先來看一個在TS中定義方法

function printLabel():void {
            console.log('printLabel');
        }
        printLabel();

ts中定義方法傳入參數

function printLabel(label:string):void {
            console.log('printLabel');
        }

        printLabel('hahah');

ts中自定義方法傳入參數,對json進行約束

function printLabel(labelInfo:{label:string}):void {
            console.log('printLabel');
        }

        printLabel('hahah'); //錯誤寫法


        printLabel({name:'張三'});  //錯誤的寫法


        printLabel({label:'張三'});  //正確的寫法

對批量方法傳入參數進行約束

接口：行爲和動做的規範，對批量方法進行約束

interface FullName {
    firstName: string;   //注意;結束
    secondName: string;
}

function printName(name: FullName) {
    // 必須傳入對象  firstName  secondName
    console.log(name.firstName + '--' + name.secondName);
}



function printInfo(info: FullName) {

    // 必須傳入對象  firstName  secondName
    console.log(info.firstName + info.secondName);
}

var obj = {   /*傳入的參數必須包含 firstName  secondName*/
    age: 20,
    firstName: '張',
    secondName: '三'
};
printName(obj);


printInfo({
    firstName: '李',
    secondName: '四'
})

可選屬性

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

    function getName(name:FullName){
        console.log(name)
    }  
    getName({               
        firstName:'firstName'
    })

函數類型接口

接口可以描述JavaScript中對象擁有的各類各樣的外形。 除了描述帶有屬性的普通對象外，接口也能夠描述函數類型。

爲了使用接口表示函數類型，咱們須要給接口定義一個調用簽名。 它就像是一個只有參數列表和返回值類型的函數定義。參數列表裏的每一個參數都須要名字和類型。

interface encrypt{
    (key:string,value:string):string;
}


var md5:encrypt=function(key1:string,value1:string):string{
        //模擬操做
        return key1+value1;
}

console.log(md5('name','zhangsan'));

函數類型接口:對方法傳入的參數 以及返回值進行批量約束。

可索引接口

數組、對象的約束 （不經常使用）

數組約束

interface UserArr{
    [index:number]:string
}


// var arr:UserArr=['aaa','bbb']; //正確

// console.log(arr[0]);



var arr:UserArr=[123,'bbb'];  /*錯誤*/

console.log(arr[0]);

對象約束

interface UserObj {

    [index: string]: string
}


var arr: UserObj = { name: '張三' };

類類型接口

對類的約束 和 抽象類抽象有點類似

interface Animal{
        name:string;
        eat(str:string):void;
    }

    class Dog implements Animal{

        name:string;
        constructor(name:string){

            this.name=name;

        }
        eat(){

            console.log(this.name+'吃糧食')
        }
    }


    var d=new Dog('小黑');
    d.eat();


    class Cat implements Animal{
        name:string;
        constructor(name:string){

            this.name=name;

        }
        eat(food:string){

            console.log(this.name+'吃'+food);
        }
    }

    var c=new Cat('小花');
    c.eat('老鼠');

接口繼承

interface Animal{

    eat():void;
}

interface Person extends Animal{

    work():void;
}


class Programmer{

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

        console.log(this.name+code)
    }
}


class Web extends Programmer implements Person{
    
    constructor(name:string){
       super(name)
    }
    eat(){

        console.log(this.name+'喜歡吃饅頭')
    }
    work(){

        console.log(this.name+'寫代碼');
    }
    
}

var w=new Web('小李');

// w.eat();

w.coding('寫ts代碼');