「TypeScript」入门进阶(三)✈️---类与接口本文主要分享了TypeScript的类与接口，欢迎掘友们阅读。虽

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战

🎉 前言

虽然之前有学过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:'半糖'
}

上述例子中定义了两个接口分别是addIce addSugar,而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的写法类似啊,所以我们继承了一个类实际上就是继承了一个接口。
值得一提的是，接口继承类的时候，只会继承它的实例属性和实例方法，继承不了构造函数。