「TypeScript」入门进阶(三)✈️---类与接口-阿里云开发者社区

「TypeScript」入门进阶(三)✈️---类与接口

2022-04-25 219

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 「TypeScript」入门进阶(三)✈️---类与接口

🎉 前言

虽然之前有学过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的写法类似啊,所以我们继承了一个类实际上就是继承了一个接口。
值得一提的是，接口继承类的时候，只会继承它的实例属性和实例方法，继承不了构造函数。