Typescript中的接口

1. 接口的作用

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

2. 接口的分类

• 属性类接口
• 函数类接口
• 可索引接口
• 类类型接口
• 接口扩展

2.1 属性接口

对json的约束

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

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

function printName(name: FullName){
    // 必须传入对象 firstName secondName

    console.log(name: firstName + ' ' + name.secondName);
}

// 直接传参只能传定义的参数，而且必须传
printName({
    firstName: '张',
    secondName: '三'
});

// 这样外部定义参数可以传入除了必须参数意外的其他参数
let name = {
    age: 20,
    firstName: '张',
    secondName: '三'
}
printName(name);

2.2 可选属性接口

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

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

getName({
    firstName: '张'
})


// 请求数据配置选项
$.ajax({
    type: 'get',
    url: 'http://xxx.xxx.xx',
    data: {},
    dataType: 'json'
});

interface Config{
    type: string,
    url: string,
    data?: any
    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.readuState == 4 && xhr.status === 200){
            console.log('log');
        }
    }
}

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

2.3 函数类型接口

对方法传入的参数，以及返回值进行约束

// 实现一个加密的函数类型接口

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

let md5: encrypt = (key: string, value: string): string => {
    return 'key' + ':' + value;
}

console.log(md5({'name': '张'}));

let sha1:encrypt = (key: string, value: string):string => {
     return 'key' + ':' + value;
}
console.log(sha1({'name': '张'}));

2.4 可索引接口

对数组，对象的约束

// 对数据约束
interface UserArr{
    [index:number]: string
}

let arr:UserArr = ['123', '456'];


// 对对象约束
interface UserObj{
    [index:string]:string
}

let arr:UserObj = [name: '张'];


// 类类型接口：对类约束
interface Animal{
    name: string;

    eat(str: string):void{

    }
}

class Dog implements Animal{
    name: string;
    constructor(name:string){
        this.name = name;
    }

    eat(){
        console.log(this.name);
    }
}

let hei = new Dog('小黑');
hei.eat();

2.5 扩展接口

接口也可以继承接口

interface Animal{
    eat():void;
}

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

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

    coding(){
        console.log('coding');
    }
}

class Web extends Programmer inplements Person{
   
    constructor(name: string){
        super(name);
    }

    eat(){
        console.log(this.name);
    }

    work(){
        console.log(thsi.name);
    }
}

new worker = new Web('小一');
worker.eat();
worker.work();
worker.coding();