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