ts核心基础之接口（Interface）

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

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

SRP(Single Responsibility Principle) 单一职责原则；
OCP(Open Closed Principle) 开/闭原则；
LSP(Liskov Substitution Principle) 里氏替换原则；
ISP(Interface Segregation Principle) 接口分离原则；
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.

来源：CSDN

作者：baoleilei6

链接：https://blog.csdn.net/qq_34629352/article/details/103547274

标签

接口