🎉 前言
- 虽然之前有学过
TypeScript但是平时业务上面都还是用JavaScript来开发导致逐渐对TypeScript生疏了。 - 借此更文活动的机会再来一起学习一下
TypeScript的知识吧。 - 在之前的文章中我们
TypeScript的基础知识过了一遍，是不是发现其实也不会很难呢。 - 本文也是
TypeScript进阶篇的第三篇，讲的是类与接口的那些事，关于基础篇可以看我之前分享的文章喔~ - 本文大概
1300+字，阅读可能需要十分钟~ 🥂
🌋 TypeScript类的实现(implement)
- 在我们之前学习的类中，每个类只能继承一个类，但有没有这样一种情况，不同的类之间有共同的属性或方法。
- 假设一个奶茶店要做一杯
冰拿铁和冰奶茶，我们都需要给它加糖加冰，这时候如果使用类与类继承的方式可能会不太方便甚至很难完成，这时候我们可不可以跟之前学习的接口一样规定一个类的特性。 - 我们还是可以选择接口来规定一个类的形状,但类与接口的连接不可以使用
:了，要使用implement实现。
- 创建一个
interface规定一个形状。 - 创建一个类实现(
implement)这个interface - 类中需要包括
interface中的属性和方法
interface makeMilk { addIce():void addSugar():void } class MilkTea implements makeMilk { addIce() { console.log('奶茶加冰'); } addSugar(){ console.log('奶茶加糖') } } class Latte implements makeMilk { addIce() { console.log('奶茶加冰'); } addSugar(){ console.log('奶茶加糖') } } let milk=new MilkTea; let latte=new Latte; milk.addIce()//奶茶加冰 milk.addSugar()//奶茶加糖 latte.addIce()//奶茶加冰 latte.addSugar()//奶茶加糖 复制代码
- 在上面这个例子中我们可以看到制作一杯奶茶和拿铁都需要
加糖加冰这个操作，而这个操作定义在interface中，我们可以通过类实现接口来获取这两个方法。 - 最后再将两个
奶茶类和拿铁类进行实例化，实例对象就可以使用这些方法啦~ - 当然一个类也可以
实现多个接口interface
interface Ice { addIce():void } interface Sugar { addSugar():void } class MilkTea implements Ice,Sugar { addIce() { console.log('奶茶加冰'); } addSugar(){ console.log('奶茶加糖') } } let milk=new MilkTea; milk.addIce()//奶茶加冰 milk.addSugar()//奶茶加糖 复制代码
- 如上就是一个
奶茶类同时实现了加冰加糖的接口。
🗻 TypeScript接口继承接口
- 跟类继承类一样，相同的对象难免是可以继承的，接口也可以继承接口，连接方式也是使用
extends。
interface addIce{ ice:string } interface addSugar extends addIce{ sugar:string } let milk:addSugar={ ice:'少冰', sugar:'半糖' } 复制代码
- 上述例子中定义了两个接口分别是
addIceaddSugar,而addSugar继承了addIce的ice属性，所以在使用addSugar接口的时候形状必须一致。 - 在
milk变量中因为使用了addSugar接口，所以属性如果不符合形状就会报错。
🏖️ TypeScript接口继承类
- 在
TypeScript中我们可以使用接口来继承类。
class MilkTea { ice:string sugar:string constructor(ice:string,sugar:string){//constructor是一个构造方法，用来接收参数 this.ice = ice; this.sugar = sugar; }; } interface doSthing extends MilkTea{ } let milk:doSthing={ ice:'少冰', sugar:'半糖' } 复制代码
- 在上面的例子中，我们的
interface接口规定了形状，而这个形状本身是没有东西的，但是它继承了MilkTea类的ice和sugar属性，所以就规定了使用这个接口interface的变量需要有ice和sugar属性。 - 如上我们的
milk给了它一个接口doSthing，所以这个变量需要有ice和sugar属性。 - 有同学会问了:啊 接口跟类又不是同一种东西那怎么可以继承呢？，虽然这两不是一个东西，但是我们在定义一个
class的时候其实也是定义了一种类型。 - 就拿上面的
MilkTea类来说，我们创建这个类的时候其实也是创建了一个MilkTea的类型，我们可以这样使用。
class MilkTea { ice:string sugar:string constructor(ice:string,sugar:string){//constructor是一个构造方法，用来接收参数 this.ice = ice; this.sugar = sugar; }; } let milk:MilkTea={ ice:'少冰', sugar:'半糖' } 复制代码
- 这样是没有问题的，所以当我们
doSthing接口继承时其实是集成了MilkTea这个类型，而这个类型大家是不是觉得很熟悉，他就是interface的写法类似啊,所以我们继承了一个类实际上就是继承了一个接口。 - 值得一提的是，接口继承类的时候，只会继承它的实例属性和实例方法，继承不了构造函数。
👋 写在最后
- 本文也算是记录一下
TypeScript的学习，接下来我会持续输出TypeScript相关的知识，大家可以一起来学习。 - 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛
🌅 往期精彩
「TypeScript」入门基础(一)🎯---安装与基础数据类型
「TypeScript」入门基础(二)🎯---联合类型与接口
「TypeScript」入门基础(三)🎯---数组类型与函数类型
「TypeScript」入门进阶(一)✈️---类型别名、字符串字面量与元组
