This is the 13th day of my participation in the August More Text Challenge. For details, see:August is more challenging

🎉 preface

  • I’ve learned that beforeTypeScriptBut at ordinary times the business is still used aboveJavaScriptTo develop leads gradually onTypeScriptOut of practice.
  • Take this opportunity to study together againTypeScriptKnowledge of.
  • In the previous article weTypeScriptAfter a review of the basic knowledge, it is not found that it is not very difficult.
  • This article isTypeScriptThe third part of the advanced part is about classes and interfaces. For the basic part, see the article I shared earlier
  • This article about1300 +Word, reading may take ten minutes ~ 🥂

🌋 TypeScript class implementations (implement)

  • In the previous classes we studied, each class can only inherit one class, but is there a case where different classes have common properties or methods?
  • Suppose a milk tea shop wants to make a cupIce latteandIce tea with milkWe all need to give itThe sugar iceIn this case, it may not be convenient or even difficult to complete the method of class and class inheritance. At this time, can we follow the previous studyinterfaceThe same defines the properties of a class.
  • We can still choose the interface to define the shape of a class, but the connection between the class and the interface cannot be used:To useimplementThe implementation.
    • To create ainterfaceSpecify a shape.
    • Create a class implementation (implement) theinterface
    • Class needs to includeinterfaceProperties and methods in
Interface makeMilk {addIce():void addSugar():void} class MilkTea implements makeMilk {addIce() {console.log(' MilkTea implements ice ');  } addSugar(){console.log(' milk tea implements makeMilk ')}} class Latte implements makeMilk {addIce() {console.log(' milk tea implements '); } addSugar(){console.log(' milk tea with sugar ')}} let milk=new MilkTea; let latte=new Latte; Milk.addice ()// Milk tea with ice milk.addsugar ()// Milk tea with sugar latt.addice ()// Milk tea with ice latt.addsugar ()// Milk tea with ice latt.addsugar ()// Milk tea with sugarCopy the code
  • In this example we can see that it takes to make both a milky tea and a latteThe sugar iceThis operation, and this operation is defined ininterfaceIn, we can go throughclassimplementationinterfaceTo get these two methods.
  • And then two moreMilk tea classandLatte classTo instantiate the method, the instance object can use these methods
  • Of course a class will doimplementationMultiple interfacesinterface
interface Ice { addIce():void } interface Sugar { addSugar():void } class MilkTea implements Ice,Sugar { addIce() { Console. log(' milk tea with ice '); } addSugar(){console.log(' milk tea with sugar ')}} let milk=new MilkTea; Milk.addice ()// Milk tea with iceCopy the code
  • So here’s oneMilk tea classAt the same timeice The sugarThe interface.

🗻 TypeScript interfaces inherit interfaces

  • Just like a class inherits a class, the same object can inevitably inherit, interface can also inherit interface, connection mode is also usedextends.
Interface addSugar extends addIce{sugar:string} interface addSugar extends addIce{sugar:string} let milk:addSugar={ice:' less ice ', Sugar :' half-sugar '}Copy the code
  • The two interfaces defined in the above example areaddIce addSugarAnd theaddSugarinheritedaddIcetheiceProperty, so in useaddSugarThe shapes of interfaces must be consistent.
  • inmilkVariable because of the use ofaddSugarInterface, so an error will be reported if the property does not fit the shape.

🏖️ TypeScript interfaces inherit classes

  • inTypeScriptWe can use interfaces to inherit classes.
Class MilkTea {ice:string sugar:string constructor(ice:string,sugar:string){//constructor is a constructor, To receive the this.ice = ice; this.sugar = sugar; }; } interface doSthing extends MilkTea{} let milk:doSthing={ice:' ice ', sugar:' half-sugar '}Copy the code
  • In the example above, ourinterfaceThe interface specifies the shape, which itself has nothing, but it inheritsMilkTeaOf the classiceandsugarProperty, so the use of this interface is specifiedinterfaceThe variable of theta needs to beiceandsugarProperties.
  • As we didmilkI gave it an interfacedoSthing, so this variable needs to haveiceandsugarProperties.
  • Some students will ask:Well, interfaces and classes are not the same thing, so how can we inherit?Although these two are not the same thing, we are defining oneclassWhen you define a type, you define a type.
  • Just take the top oneMilkTeaClass, when we create this class we create a classMilkTeaType of, we can use as follows.
Class MilkTea {ice:string sugar:string constructor(ice:string,sugar:string){//constructor is a constructor, To receive the this.ice = ice; this.sugar = sugar; }; } let milk:MilkTea={ice:' ice ', sugar:' half sugar '}Copy the code
  • There’s no problem with that, so when wedoSthingInterfaces are actually integrated when they inheritMilkTeaThis type, and this type is familiar to you, he isinterfaceSo if we inherit a class we inherit an interface.
  • It is worth mentioning that when an interface inherits from a class, it only inherits its instance properties and methods, but not its constructor.

👋 at the end

  • This is for the recordTypeScriptI will continue to outputTypeScriptRelated knowledge, you can learn together.
  • If you think this article is helpful to your words might as well 🍉 attention + thumbs up + favorites + comments + forwarding 🍉 support yo ~~😛

🌅 past wonderful

Getting Started with TypeScript basics (3)🎯

Getting Started with TypeScript Basics (IV)🎯

“TypeScript” Getting Started (1)✈️

“TypeScript” Getting Started (2)✈️