Typescript的接口

typescript文档

https://www.tslang.cn/docs/handbook/jsx.html

接口的作用：

　　在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵循的规范，接口不关心这些类的内部状态数据，也不关心这些类里面方法的具体实现细节，只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。typescript中的接口类似于java，同时增加了更灵活的接口类型，包括属性、函数、可索引和类等。

接口约束json结构，首先创建一个空目录，终端输入：tsc --init，修改json文件，创建一个index.html文件，最后创建一个index.ts文件，修改vscode配置，自动生成js

// ts中定义方法，其实通过参数的传递及格式要求，就是一种接口约束
function printLabel(name:string):void{ // 参数的约束
    console.log(name)
}
printLabel("Ok")

// ts 中自定义方法传入参数对 json进行约束
function printLabel_1(labelInfo:{label:string}):void{ // 参数的约束
    console.log(labelInfo.label)
}
printLabel_1({label:"Nice"}) // 传入带有label的对象

//1、 ts 实现批量方法的传入参数的约束，可以使用接口

interface fullName {   // 定义接口
    // 对象必须要携带以下参数
    firstName:string;
    secondName:string;
}

function printLabel_2(name:fullName):void{ // 参数的约束
    console.log(name.firstName + "--" + name.secondName)
}

var obj = {  // 推荐这样写，外部写对象，再传入，这样可以添加额外的age，不会报错
    age:20,
    firstName:"wu",
    secondName:"yu",
}
printLabel_2({firstName:"wang",secondName:"li"}) // 传入带有label的对象
printLabel_2(obj)

function printLabel_3(name:fullName):void{ // 也可以实现这个接口
    console.log(name.firstName + "--" + name.secondName)
}


//2、可选接口属性
interface fullName1 {   // 定义接口
    // 对象必须要携带以下参数
    firstName:string;
    secondName?:string;  // 通过？使其成为可选参数，不是必须要这个参数
}

function printLabel_4(name:fullName1):void{ // 也可以实现这个接口
    if (name.secondName){
        console.log(name.firstName + "--" + name.secondName)
    }else{
        console.log(name.firstName+"没有secondName")
    }    
}

printLabel_4({firstName:"xi",secondName:"he"})
printLabel_4({firstName:"lisi"})

函数类型接口：对方法接入的参数以及返回值进行约束，接口约束函数

// 函数类型接口, 实现加密函数
interface encrypt {
    (key:string,value:string):string  // 之前的是约束参数的，这里是约束函数的
}

var md5:encrypt = function(key:string,value:string):string{  // 约束函数
    // 模拟操作
    return key+value
}

var sha1:encrypt = function(key:string,value:string):string{  // 约束函数
    // 模拟操作
    return key+value+"加密"
}

// 接口约束函数
alert(md5("name","张三"))

可索引接口，数组、对象的约束

//1、 中数组约束
interface UserArr {
    [index:number]:string  // 通过接口越是数组的类型，索引是数值类型，值为value
    // [index:number]:any  // 通过接口越是数组的类型，索引是数值类型，值为any
}

var arr:UserArr=['1212','1233','aaa']
alert(arr[1])  // 1233
alert(arr[2])  // aaa

//2、 对对象的约束
interface userObj {
    [index:string]:string
}

var obj:userObj = {
    name:"wang",
    xing:"li",
    // age:20,  // 错误
}

类类型接口和抽象类有点相似

interface Animal {
    name:string     // 类属性接口约束
    eat(str:string):void  // 类方法接口约束
}

class Dog implements Animal {
    name:string;
    constructor(name:string){
        this.name = name
    }
    eat(){   // 必须实现eat方法否则报错,可不传name
        console.log(this.name+'吃粮食')
    }
}
var d = new Dog("小黑")
d.eat()

接口的扩展，也就是说接口可以继承接口

interface Animal1 {
    eat():void;
}

interface Person extends Animal1 {  // 继承Animal1接口
    work():void;
}

class Web implements Person {  // 类继承Person,就需要实现各自的接口
    public name:string;
    constructor(name:string){
        this.name = name
    }

    eat(){
        console.log(this.name+"馒头喜欢")
    }

    work(){
        console.log(this.name+"正在工作")
    }
}

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

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

    coding(code:string) {
        console.log(this.name+code)
    }
}


// 复杂结构的类的继承+接口扩展
class Web_1 extends Programmer implements Person {  // 类继承Person,就需要实现各自的接口
    constructor(name:string){
        super(name)
    }

    eat(){
        console.log(this.name+"馒头喜欢")
    }

    work(){
        console.log(this.name+"正在工作")
    }
}

var w1  = new Web_1("小王")
w1.coding('ts代码')
w1.eat();

案例

1、书写一个ajax的方法实现接口约束

// 约束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("success")

            if (config.dataType=='json'){
                console.log(JSON.parse(xhr.responseText))
            }else{
                console.log(xhr.responseText)
            }
        }
    }
}

ajax({
    type:'get',
    url:'http://a.itying.com/api/productlist',
    dataType:'json'
})