TypeScript--接口

zhongmeizhi 發(fā)布于2019-08-23 15:13 / 1961人閱讀

摘要：接口接口的作用在面向?qū)ο蟮木幊讨?，接口是一種規(guī)范的定義，它定義了行為和動(dòng)作規(guī)范，在程序設(shè)計(jì)里面，接口起到了一種限制和規(guī)范的作用接口定義了某一批類所需要遵守的規(guī)范，接口不關(guān)心這些類的內(nèi)部狀態(tài)數(shù)據(jù)，也不關(guān)心這些類里面方法的實(shí)現(xiàn)細(xì)節(jié)，它只規(guī)定這批

接口

接口的作用:在面向?qū)ο蟮木幊讨校涌谑且环N規(guī)范的定義，它定義了行為和動(dòng)作規(guī)范，在程序設(shè)計(jì)里面，接口起到了一種限制和規(guī)范的作用

接口定義了某一批類所需要遵守的規(guī)范，接口不關(guān)心這些類的內(nèi)部狀態(tài)數(shù)據(jù)，也不關(guān)心這些類里面方法的實(shí)現(xiàn)細(xì)節(jié)，它只規(guī)定這批類里面必須提供某些方法，提供這些方法的類就可以滿足實(shí)際需要

typescript中的接口類似于java，同時(shí)還增加了更靈活的接口類型，包括屬性，函數(shù)，可索引和類等

Typescript中的接口 標(biāo)準(zhǔn)寫法

//定義接口
interface FullName{
    firstName:string;
    secodeName:string;
}
//聲明方法,傳入的參數(shù)為接口中定義的類型
function printName(name:FullName){
    console.log(name.firstName + name.secodeName);
}
//調(diào)用方法，傳入定義好的接口，參數(shù)
printName({
    firstName:"aa",
    secodeName:"bb"
});

順序可調(diào)亂

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

function printName(name:FullName){
    console.log(name.firstName + name.secodeName);
}
printName({
    secodeName:"bbb",
    firstName:"aaa",
});

另一種正確寫法，傳入的參數(shù)可比定義的多

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

function printName(name:FullName){
    console.log(name.firstName + name.secodeName);
}
var obj = {
    age:20,
    firstName:"cc",
    secodeName:"dd"
}
printName(obj);

錯(cuò)誤寫法 數(shù)據(jù)類型不一致

數(shù)量不一致

可選參數(shù)?

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

function printName(name:FullName){
    console.log(name);
}

printName({
    firstName:"aa"
})

printName({
    firstName:"aa",
    secodeName:"bb"
})

屬性類型接口(ajax)

interface Config{
    type:string;
    url:string;
    data?:string;
    dataType:string;
}

function ajax(config:Config) {
    var xhr = new XMLHttpRequest();
    xhr.open(config.type, config.url, true);
    xhr.send(config.data);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log("chengong");
            if (config.dataType == "json") {
                console.log(JSON.parse(xhr.responseText));
            }
            else {
                console.log(xhr.responseText);
            }
        }
    };
}

//可選參數(shù)data,不傳data
ajax({
    type: "get",
    url: "http://a.itying.com/api/productlist",
    dataType: "json"
});
//可選參數(shù)data,傳data
ajax({
    type: "get",
    data: "name=zhangsan",
    url: "http://a.itying.com/api/productlist",
    dataType: "json"
});

函數(shù)類型口

對(duì)方法傳入的參數(shù)，以及返回值進(jìn)行約束
可能批量，對(duì)應(yīng)多個(gè)方法

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

var md5:encrypt = function(key:string,value:string):string{
    return key+value;
}

console.log(md5("name","lisi"));

var sha1:encrypt = function(key:string,value:string):string{
    return key+"---"+ value;
}
console.log(sha1("name","wanwu"));

可索引接口 數(shù)組 正確

interface UserArr{
    [index:number]:string
}

var arr:UserArr=["123","456"];
console.log(arr[0]);

錯(cuò)誤

interface UserArr{
    [index:number]:string
}
var arr:UserArr=[123,"bbb"];
console.log(arr[0]);

對(duì)象

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

var arr:UserObj= {name:"list"};
console.log(arr.name)

類類型接口

對(duì)類的約束

和抽象類抽象有點(diǎn)相似，比抽象類更強(qiáng)大

implements為類實(shí)現(xiàn)接口

接口中的屬性和方法都要有

正確

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

class Dogg implements Animall{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(){
        console.log(this.name+"吃糧食")
    }
}

var dd = new Dogg("小黑");
dd.eat();


class Catt implements Animall{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(food:string){
        console.log(this.name + "吃" + food);
    }
}

var cc = new Catt("小花貓");
cc.eat("老鼠");

錯(cuò)誤

類中沒(méi)有對(duì)應(yīng)的方法

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

class Dogg implements Animall{
    name:string;
    constructor(name:string){
        this.name = name;
    }
}

var dd = new Dogg("小黑");
dd.eat();

接口拓展:接口可以繼承接口 一個(gè)類實(shí)現(xiàn)二個(gè)接口

// 動(dòng)物接口
interface Animalll{
    eat():void;
}
//人接口，人屬性動(dòng)物
interface Person extends Animalll{
    work():void;
}
//前端類
class Web implements Person{
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(){
        console.log(this.name +"吃米粉");
    }
    work(){
        console.log(this.name + "寫js");
    }
}

var w = new Web("小李");
w.eat()
w.work()

一個(gè)類繼承父類，并實(shí)現(xiàn)2個(gè)接口(一個(gè)接口繼承另一個(gè)接口)

// 動(dòng)物接口
interface Animalll{
    eat():void;
}
//人接口，人屬性動(dòng)物
interface Person extends Animalll{
    work():void;
}
//程序員類
class Programmer{
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    conding(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 + "寫js");
    }
}

var w = new Web("小李");
w.eat()
w.work()
w.conding("寫代碼")