ts核心基础之接口（Interface）

作为一个纯粹的前端攻城狮，有时候很难理解面向对象的思维，所以，有些功能你能够用JS完成，但是转换成TS就有点不知所措了。

面向对象设计和编程遵循的几个原则：
SOLID原则：

1. SRP(Single Responsibility Principle) 单一职责原则；
2. OCP(Open Closed Principle) 开/闭原则；
3. LSP(Liskov Substitution Principle) 里氏替换原则；
4. ISP(Interface Segregation Principle) 接口分离原则；
5. DIP(Dependency Inversion Principle) 依赖反转原则。

想了解具体详情的可以去程序员该有的艺术气质–SOLID原则看看

接口初探
接下来，我们使用一个例子来说明接口的工作原理：

function printLabel(labelObj:{ label:string }){
    console.log(  labelObj.label );
}

let myObj={  size:10,label:"Size 10 Object" };
printLabel(myObj);

这是一个简单的函数，在调用printLabel时，会检查传入参数的类型，并且只检查那些必需属性是否存在，并且类型是否匹配。下面利用接口重写上面的例子

interface labelValue{
   label:string;
}

function printLabel(labelObj:labelValue){
    console.log( labelObj.label );
}

let myObj2={  size:10,label:"Size 10 Object" };
printLabel(myObj2);

在参数类型检查的时候，会发现参数遵循的是接口labelValue的规范，然后就回去检查是不是符合接口所描述的规范。
接口就相当于是一个约束，让大家都遵循。

接口的扩展

//shape接口
interface Shape{
   //颜色
    color:string;
}

interface Triangle extends Shape{
    //边数
    sideNum:number;
}
let triangle=<Triangle>{};
triangle.color="blue";
triangle.sideNum=3;

let square:Shape;
square.color="red";
//报错
//square.sideNum=4;

接口的扩展就是给多添加了一些约束。一个接口可以扩展多个接口，用“，”隔开，当一个接口扩展另一个接口，也继承了该接口的约束。

从上面例子中可以看出，Triangle接口继承了Shape接口。
而triangle变量遵循的是Triangle接口，所以也遵循Triangle接口继承而来的约束。
而square变量遵循的是Shape接口，不能够往下继承，所以只遵循Shape接口的约束。而Shape接口里面没有定义sideNum的这个属性，所以报错。

类实现接口

interface ClockInterface{
    currentTime:Date;
    getTime(d:Date);
}
class Clock implements ClockInterface{
    currentTime:Date;
    getTime(){
        console.log("123");
    }
    constructor(h:number,m:number){}
}
let clock1=new Clock(30,40);
clock1.getTime();

类实现接口本质上也是一样的，即类遵循接口的约束，接口里面写了多少个函数、参数，实现的类里面也要写相同的函数、参数。

接口继承类

class Point{
    x:number;
    y:number;
    constructor(){}
    log(){
       console.log('123456');
    }
}
interface  Point3d extends Point{
    z:number;
}

var point3d:Point3d={
    x:1,
    y:2,
    z:3,
    log(){
        //console.log('7777');
        console.log();
    }
}
//point3d.log();//7777
point3d.log();  //空的  并没打印

官方解释：当接口继承了一个类类型时，它会继承类的成员但不包括其实现。
也就是说，接口继承类值继承了它的约束条件，具体的值并不继承。从上面例子中可以看出Point3d继承了Point类，然后就继承了Point类所遵循的约束条件。也就是说,Point接口实际上是这样的：

interface Point{
    x:number;
    y:number;
    log(){}
}

Point3d接口实际上是这样的：

interface Point3d{
    x:number;
    y:number;
    z:number;
    log(){}
}

总结

接口扩展(继承)接口

interfaceA extends interfaceB

类实现接口

classA implements interfaceA

接口继承类

interfaceB extends classB

另外类扩展类

classA extends classB

有人肯分不清上面时候用extends，什么时候用implements。
记住一句话，只要涉及到继承就是extends.