typescript 的接口 约束

接口

接口的作用

在面向对象的编程中，接口是一种规范的定义，它定义的行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类内部状态数据，也不关系这些类里面方法说实现细节。他只规定这批类里面必须提供某些方法，提供这些方法就可以满足实际需求。

属性接口

简单约束

// 要求 必须一个参数 string类型
function printLable(lable:string):void{
    console.log("printLable")
}
printLable('sstr')


// 对json进行约束  参数对象有一个string类型的txt属性
function printInfo(info:{'txt':string}):void{
    console.log("printLable")
}
printInfo({'txt':"xx"})

属性接口

// 必须传入一个对象 只有firstName 和 secondName 都是string类型
interface FullName{
    firstName:string;
    secondName:string;
}
function print(name:FullName){
    console.log(name)
}

var obj = {
    firstName:'xx',
    secondName:"xx",
    age:18
} //写在外面可以 避免 只能传2个属性 但是在使用age属性的时候 还是会有错误提示 还是要严格按规范来
// print({firstName:'xx',secondName:"xx"}) {firstName: "xx", secondName: "xx"} //多写会报错
print(obj) //{firstName: "xx", secondName: "xx", age: 18}

批量约束

interface FullName{
    firstName:string;
    secondName:string;
}
function print(name:FullName){
    console.log(name)
}
function printInfo(name:FullName){
    console.log(name)
}

var obj = {
    firstName:'xx',
    secondName:"xx",
    age:18
} 

print(obj)

printInfo(obj)

可选属性接口

// secondName 可不传
interface FullName{
    firstName:string;
    secondName?:string;
}

function print(name:FullName){
    console.log(name.secondName) //undefined
}

print({
    firstName:'xx'
})

示例

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

function Ajax(params:ConFig){
    var xhr = new XMLHttpRequest()

    xhr.open(params.type,params.url)

    xhr.send(params.data)

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status){
            if(params.dataType == "josn"){
                console.log(JSON.parse(xhr.responseText))
            }else{
                console.log(xhr.responseText)
            }
        }
    }

}

Ajax({
    type:"get",
    url:"xxxx.php",
    data:"name=张三",
    dataType:"json"
})

函数类型接口

对方法传入的参数，以及返回值进行约束 可批量约束
实现一个加密的函数类型接口

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

var md5:encrypt = function(key:string,val:string):string{

    // 模拟操作
    return key + val
}

console.log(md5("name","张三"))

可索引接口

可索引接口: 数组、对象的约束（不常用）
对数组的约束

// 索引必须是number 值必须是string
interface UserArr {
    [index:number]:string
}

var arr:UserArr = ['dd',"11"]

对象的约束

// 键必须是string 值必须是string
interface UserObj{
    [index:string]:string
}

var obj:UserObj = {
    "name":"22"
}

类类型接口

对类的约束 和 抽象类有点相似

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


// 定义的类 Dog 必须要有name和eat方法(方法的参数和返回值不做限制) 
class Dog implements Animal{
    name:string;
    constructor(name:string){
        this.name = name
    }
    eat(str:string):string{  
        return ""
    };
}

接口扩展

接口可以继承接口

interface Animal{
    eat():void;
}

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

// 类 Son 必须要有eat work 方法
class Son implements Person{
    constructor(){

    }
    eat(){

    }
    work(){

    }
}

结合继承

interface Animal{
    eat():void;
}

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

class Yee {
    constructor(){

    }
    coding(){

    }
}

// 类 Son 必须要有eat work 方法 继承Yee类
class Son extends Yee implements Person{
    constructor(){
        super()
    }
    eat(){

    }
    work(){

    }
}