这是我参与「第四届青训营」笔记创作活动的的第8天。

接口的概念

参考资料：TS中接口是什么与类型的关系是什么 · Issue #145 · su37josephxia/frontend-interview (github.com)

接口

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对对象的形状（Shape）」进行描述。

接口一般首字母大写。

赋值的时候，变量的形状必须和接口的形状保持一致

如果希望不要完全匹配一个形状，那么可以用可选属性

类

• 类（Class）：定义了一件事物的抽象特点，包含它的属性和方法
• 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

类与接口

接口可以对类的一部分行为进行抽象

• 类实现接口

  • 一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现
  • 一个类可以实现多个接口

• 接口继承接口

  • 接口与接口之间可以是继承关系

• 接口继承类

  • 常见的面向对象语言中，接口是不能继承类的，但是在 TypeScript 中却是可以的。因为我们创建一个类的时候，除了会创建一个类之外，同时也创建了一个与类同名的类型，可以当做一个类型来用
  • 在接口继承类的时候，也只会继承它的实例属性和实例方法

TypeScript中的接口类型

1. 属性类接口

属性接口——对传入对象的约束

interface FullName{
    firstName:string;
    secondName:string;  //需以分号;结束！！
}

function printName(name:FullName){
    console.log(name.firstName+'--'+name.secondName)
}

//函数调用
printName({
    firstName:'张',
    secondName:'三'
})

/*
或者——
    var obj = {
        firstName:'张',
        secondName:'三'
    };
    printName(obj)
*/

2. 函数类型接口

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

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

var md5:encrypt=function(key:string,value:string):string{
    return key+value;
}

console.log(md5('name','zhangsan'));

3. 可索引接口

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

interface UserArr{
    [index:number]:string //索引是数字类型，元素是字符类型
}

var arr:UserArr=['aaa','bbb'];

/*
    interface UserObj{
        [index:string]:string
    }
    
    var arr:UserObj = {name:'张三'};
    }
*/

4. 类类型接口

inplements关键字

interface Animal{
    name:string;
    eat(str:string):void;
}
class Dog inplements Animal{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    eat(){
        console.log(this.name)
    } //接口中有这个方法，如果这里不定义则会报错……参数不一样是🆗的
    
var d = new Dog('仔仔')
d.eat();

5. 接口扩展

接口扩展——接口继承接口

interface Animal{
    eat():void;
}
//**`extends`关键字**
interface Person extends Animal{
    work():void;
}

class Web implements Person{
    public name:string;
    
    constructor(name:string){
        this.name=name
    }
    
    eat(){
        console.log(this.name+'在吃饭'）
    }
    work(){
        console.log(this.name+'写代码') 
    }
}