④TypeScript 接口（属性接口、函数类型接口、可索引接口、类类型接口、接口扩展）

小鱼儿 2022-12-19 13:26 390阅读 0赞

### TypeScript ###

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

--------------------

**写下博客主要用来分享知识内容，并便于自我复习和总结。  
如有错误之处，请各位大佬指出。**

--------------------

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

--------------------

# 属性接口 #

首先，如果我们想自定义方法来实现对json数据的约束：

这么操作很不方便。如果对象中存储很多数据，这么做约束太不灵活了。并且，现在也不满足重用性，如果其它函数也想用它，就得再次声明。

接口就可以帮我们完成这项工作。

接口就是行为和动作的规范，并能对批量方法传入的参数进行约束。接口的关键字：interface

Webstorm还很贴心的为我们做了标记：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter]  
那么如果我们不按照约束可以吗：

此时我们可以发现，ts会报错说，接口中不存在这样的一个参数：  
![在这里插入图片描述][20201112104430849.png_pic_cnter]  
但是！页面是肯定可以输出age的内容的。看一下js中的内容就明白了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 1]  
虽然在ts中，这么传递参数会报错，但其实有一种可以越过检测的方式：

// 传入对象的约束：属性接口
    interface FullName { 
        // 约束我们一定要传入以下参数，并且注意数据类型
        firstName: string
        secondName: string
    }
    function printName(name:FullName):void{ 
        console.log(name.firstName + name.secondName);
        // 虽然不报错，但是在ts中使用age，依然会报错
        console.log(name.age);
    }
    let obj = { 
        age: 20,
        firstName: "李",
        secondName: "四"
    }
    // 这么传参，虽然age不存在接口中，但是不会报错
    printName(obj)

此时，我们可以发现，在传递参数时已经不会报错了，但是，如果我们想使用age，那肯定会报错了，因为在接口中不存在。  
![在这里插入图片描述][20201112104556647.png_pic_cnter]  
同样的，在页面中肯定能输出age的数据。

那如果我们现在想传递这个age参数，一种方法就是在接口中直接定义了。那如果有的函数想用age，有的函数不想用age，该怎么做？

我们也可以使用可选参数：

interface FullName { 
        firstName: string
        secondName: string
        age?:number
    }
    function printName(name:FullName):void{ 
        console.log(name.firstName + name.secondName);
    }
    function printAge(info:FullName):void{ 
        console.log(info.firstName + info.secondName + info.age);
    }
    printName({ 
        firstName: "李",
        secondName: "四"
    })
    // 传递参数没有顺序
    printAge({ 
        age: 20,
        secondName: "四",
        firstName: "李"
    })

这样无论传参不传参age都不会报错了。

--------------------

除此以外，还有一种定义参数的方式：

interface FullName { 
        firstName: string
        secondName: string
        age?:number
        // 参数名是string类型，可以给它一个any类型数据
        [propname:string]:any
    }
    function printName(name:FullName):void{ 
        console.log(name.sex);
    }
    printName({ 
        firstName: "李",
        secondName: "四",
        sex: "男"
    })

此时，我们就可以传入一个比较随意的参数了。

--------------------

最后还是要说，虽然我们可以不管ts报错信息，不管接口规范，它在页面中也能展示信息，但既然选择使用ts，那显然这些规范是必须遵守的。

实例：

interface Config { 
        type: string;
        url: string;
        data?:string;
        dataType: string;
    }
    // 原生js封装ajax，不支持ie6
    function ajax(config:Config){ 
        let 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('成功');
                if(config.dataType == 'json'){ 
                    JSON.parse(xhr.responseText);
                }else{ 
                    console.log(xhr.responseText)
                }
            }
        }
    }
    ajax({ 
        type: 'get',
        url: '', //填写相关api接口
        dataType: 'json',
        data: 'name=zhangsan'
    })

--------------------

# 函数类型接口 #

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

interface FullName { 
        say():string
    }
    function printName(name:FullName):void{ 
        console.log(name.say())
    }
    printName({ 
        say(){ 
            return "我是李四"
        }
    })

// 匿名函数类型接口
    interface encrypt { 
        (key:string,value:string):string;
    }
    // 一定要遵守接口约束
    let md5:encrypt = function(key:string,value:string):string{ 
        // 模拟操作
        return key+value;
    }
    console.log(md5("name","李四"))

对于属性接口，毕竟可以对批量传参进行约束，看起来还是有用的。那看到函数类型接口，确实会有人觉得很没用，因为函数本身就可以对参数和返回值进行约束。之前已经说过，接口也是一种标准，确实函数本身也能对这些内容进行限制，但是如果接触到了项目就会明白，有一个相关说明和规范是多么重要。并且，如果接口中设计的内容再多一些，那为了满足重用性，使用这种方式也是必然。

（当然，一般情况下，公司项目组会提供相关接口文档api）

现在已经接触到了三种规范：接口、多态、抽象类。

--------------------

# 可索引接口 #

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

// 可索引接口：对数组的约束
    interface UserArr{ 
        [index:number]:string;
    }
    let arr:UserArr = ['a','b','c'];
    console.log(arr[0]);
    // 可索引接口：对对象的约束
    interface UserObj{ 
        [index:string]:string;
    }
    let arr1:UserObj = { name: '李四'};
    console.log(arr1.name);

--------------------

# 类类型接口 #

类类型接口：对类的约束，和抽象类很相似。

interface Animal{ 
        name:string;
        eat(str:string):void;
    }
    // 实现接口用关键词implements
    class Dog implements Animal{ 
        name:string;
        constructor(name:string) { 
            this.name = name;
        }
        // 必须实现方法，但是参数和数据类型不必相同
        eat():string{ 
            console.log(this.name + '吃肉')
            return this.name;
        }
    }
    let d = new Dog('旺财');
    console.log(d.eat());

--------------------

# 接口扩展 #

接口扩展：接口可以继承接口。

interface Animal{ 
        eat():void;
    }
    interface Person extends Animal{ 
        work():void;
    }
    // 实现接口用关键词implements
    class Web implements Person{ 
        name:string;
        constructor(name:string) { 
            this.name = name;
        }
        // 不仅要实现相应接口中的属性和方法,
        // 还要实现接口继承的接口中的属性和方法,
        // 否则报错
        eat():void{ 
            console.log(this.name + '吃饭');
        }
        work():void{ 
            console.log(this.name + '工作');
        }
    }
    let my = new Web('李四');
    my.eat();
    my.work();

类可以在实现接口的同时继承父类。

interface Animal{ 
        eat():void;
    }
    interface Person extends Animal{ 
        work():void;
    }
    class Programmer{ 
        name:string;
        constructor(name:string) { 
            this.name = name;
        }
        coding(code:string){ 
            console.log(this.name + code)
        }
    }
    class Web extends Programmer implements Person{ 
        constructor(name:string) { 
            super(name)
        }
        eat():void{ 
            console.log(this.name + '吃饭');
        }
        work():void{ 
            console.log(this.name + '工作');
        }
    }
    let my = new Web('李四')
    my.coding('写ts代码')

--------------------

到此为止，已经可以看出，接口和抽象类的区别：  
1、抽象类需要用abstract关键词，接口需要用interface关键词；  
2、抽象类和接口都是其它类的定义规范，不能直接被实例化；  
3、类想使用抽象类，需要用extends继承抽象类。类想使用接口，需要用implements实现接口。除此以外，接口也可以使用接口，需要用extends继承接口。  
4、抽象方法只能存放在抽象类中，它不包含具体实现并且必须在派生类中实现，而且严格遵守传入参数数量和数据类型。抽象类中也可以有非抽象方法，在继承抽象类的子类中，不需要一定去实现非抽象方法。而接口中的所有属性和方法都必须实现，但参数和数据类型不用严格对照。

--------------------

最后还有一点需要说明：接口只是帮我们在TS中完成校验的功能，它并不会转化成JS代码。而反观抽象类，它会转化成相应的JS代码。感兴趣的话，快去TS中试试吧。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter]: /images/20221120/288e1ed95e2b4a3a98c8513c9e13c5c5.png
[20201112104430849.png_pic_cnter]: /images/20221120/0b979a452d1c403ea6a40f8d5e73e49a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 1]: https://img-blog.csdnimg.cn/20201112104447546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70#pic_ceter
[20201112104556647.png_pic_cnter]: https://img-blog.csdnimg.cn/20201112104556647.png#pic_cnter