作为一个纯粹的前端攻城狮,有时候很难理解面向对象的思维,所以,有些功能你能够用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.
