typescript 中的接口及其用途

接口：定义行为动作的规范

属性接口、函数类型接口、可索引接口、类类型接口、

1、属性接口  对JSON的约束

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

function printLabel2(labelInfo: { label: string }): void {
    console.log('printLabel2');
}
printLabel2({ name: 'li' }) // 错误写法
printLabel2({ label: 'li' })

对批量方法传入参数进行约束

接口：行为和动作的规范，对批量方法进行约束

interface FullName {
    firstName: string; // 注意;结束
    secondName: string;
    age?: number // 添加问号为可选属性，可传可不传
}

function printName(name: FullName) {
    // 必须传入对象，必须包含firstName,secondName字段并且都是字符串
    console.log(name.firstName + name.secondName);
}

// 传入的对象必须包含 firstName 和 secondName
const obj = {
    firstName: '1',
    secondName: '2',
    c: 1
}
printName(obj)

 封装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) {
            if (config.dataType == 'json') {
                JSON.parse(xhr.responseText)
            } else {
                console.log('成功', xhr.responseText);
            }

        }
    }
}
ajax({
    type: 'get',
    data: 'datadatdatatatat',
    url: 'http://www.baidu.com',
    dataType: 'json'
})

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

// 加密的函数类型接口
interface encrypt {
    (key: string, value: string): string;
}

var md5: encrypt = function (key: string, value: string) {
    // 模拟操作
    return key + value
}
console.log(md5('name', 'val'));

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

// ts定义数组的方式
var arr1: number[] = [1, 2]
var arr2: Array<string> = ['1', '2']

// 可索引接口对数组的约束
interface UseArr {
    [index: number]: string
}
var arr3: UseArr = ['1', '2']

// 可索引接口对对象的约束
interface UseObj {
    [index: string]: string
}
var obj: UseObj = { name: '20', wof: '50' }

4、类类型接口 对类的约束 和抽象类相似

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

class Dog implements Animal {
    public name: string;
    constructor(name: string) {
        this.name = name
    }
    eat() {
        console.log(this.name);
    }
}
var d = new Dog('小黑')
d.eat()

class Cat implements Animal {
    public name: string;
    constructor(name: string) {
        this.name = name
    }
    eat(food) {
        console.log(this.name + food);

    }
}
var c = new Cat('小花')
c.eat('🐟')

5、接口的扩展 接口可以继承接口

interface Animal {
    eat(): void;
}
interface Person extends Animal {
    work(): void;
}
class Progromer {
    constructor(name: string) {
        this.name = name
    }
    coding(code: string) {
        console.log(this.name + code);

    }
}


class Web extends Progromer implements Person {
    constructor(name: string) {
        super(name)
    }
    eat() {
        console.log(this.name + '吃');
    }
    work() {
        console.log(this.name + '工作');
    }
}
var w = new Web('丧彪')
w.eat()
w.work()
w.coding('ts')