typescript的接口

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

json约束

约束了json的格式

// 接口 interface

interface Conn{
    host:string;
    port:number;
    username:string;
    password:string
}

// 约束了参数 及参数类型
function Connection(info:Conn):any{
    return `${info.host} --- ${info.port} --- ${info.username} --- ${info.password}`;
}
// 第一种传参方式
 Connection({
     host:"localhost",
     port:3306,
     username:"root",
     password:"root"
 })

const conn = {
    host:"localhost",
    port:3306,
    username:"root",
    password:"root"
}

// 第二种传参方式
console.log(Connection(conn))

可索引接口

可索引接口用来约束数组的格式

// 可索引接口 约束数组
interface Arr{
    // 约束数组 下标为number类型 的一个string类型数组
    [index:number]:string;
}
const ones:Arr = ["A","B","C"];
console.log(ones[0])

对象约束
 

// 对象的约束
interface Obj{
    [key:string]:any
}
const obj:Obj = {"name":"小牛"}
console.log(obj["name"])

可选操作符

属性?:数据类型

表示可选 可以写也可以不写 可以通过编译

interface IPerson{
    firstName:string,
    // ? 可选操作符 
    lastName?:string,
    sayHi:()=>string
}
// 接口约束对象
const customer:IPerson = {
    firstName:"Tom",
    lastName:"Tim",
    sayHi:():string=> "Hi Tom"
}
console.log(customer);

类类型接口
 

// 类类型接口  约束类
interface Cla{
    name:string;
    eat():any;
}

// 类类型接口  类只能用 implements 实现
class Birage implements Cla{
    public name = "goods";
    eat(){
        console.log("吃东西")
    }
}
const br = new Birage();
console.log(br.name)
br.eat();

联合类型和接口
 

// 联合类型和接口
interface RunOptions{
    program:string;
    commandline:string[] | string | (()=>string);
}
const options:RunOptions = {
    program:"tim",
    
    // 参数可以是字符串数组
    // commandline:[
    //     "小牛",
    //     "大牛"
    // ]

    // 参数可以使字符串
    // commandline:"Hi"

    // 参数可以是箭头函数
    commandline:()=>"Hi Tim"
}
console.log(options.program)
console.log(options.commandline)

接口封装ajax

// 封装ajax
interface Config{
    type:string;
    url:string;
    data?:string;
    dataType:string
}

function Ajax(config:Config):any{
    const xhr = new XMLHttpRequest();

    // 创建连接
    xhr.open(,config.type,config.url);

    // 发送请求
    xhr.send();

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            console.log("成功")
            if(config.dataType == "json"){
                console.log(JSON.parse(xhr.responseText))
            }else{
                console.log(xhr.responseText)
            }
        }
    } 
}
Ajax({
    url:"http://localhost:8080/heroall",
    type:"get",
    dataType:"json"
})

函数类型接口

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

// 函数类型接口

interface encrypt{
    // 没有函数体 
    (Key:string,value:string):string;
}

var md5 = function(Key:string,value:string):string{
    return Key + "<--->" + value; 
}
console.log(md5("root","root"))

接口继承

接口可以继承另一个接口来扩展自己

// 接口继承  接口可以通过其他接口来扩展自己
interface Andy{
    eat():void;
}
interface anfn extends Andy{
    work():void;
}
class Program{
    age:number;
    constructor(age:number){
        this.age = age;
    }
    coding():void{
        console.log(this.age + "年龄加载")
    }
}
class Aniy extends Program implements anfn{
    name:string;
    constructor(age:number,name:string){
        super(age);
        this.name = name;
    }
    eat():void{
        console.log(this.name + "吃东西")
    }
    work():void{
        console.log(this.name + "工作")
    }
}
const aniy = new Aniy(20,"小牛");
aniy.coding();
aniy.eat();
aniy.work();