“This is the 14th day of my participation in the August Text Challenge.

Interfaces interface

An interface is an abstract description of an object’s properties and methods

For example: a little black dog called kitten is eating bone, a little white cat called puppy is eating cat food… Animals have a name, a color, and a way of eating

Interface definition

// interface Animal {name: string; color: string; eat(): void; } const dog: Animal = {name: 'cat ', color:' black ', eat(): Void {console.log(' a little ${this.name} dog is eating a bone '); void {console.log(' a little ${this.color} dog is eating a bone '); } } dog.eat(); Const cat: Animal = {name: 'puppy ', color:' white ', eat(): Console. log(' ${this.name} ${this.color} cat is eating cat food '); void {console.log(' ${this.name} cat is eating cat food '); } } cat.eat();Copy the code

Have small cleverness to say, my dog have no name, the name that you define let me pass what??

Optional properties?

Not all attributes in the interface are required. Some exist only under certain conditions or do not exist at all, and interfaces with optional attributes are just like normal interface definitions, with optional attribute names followed by one. Right? Symbols.

Interface Animal {name? : string; // Optional parameter color: string; eat(): void; } const dog: Animal = {name: 'cat ', color:' black ', eat(): Void {console.log(' a little ${this.name} dog is eating a bone '); void {console.log(' a little ${this.color} dog is eating a bone '); } } dog.eat(); Const cat: Animal = {name: 'puppy ', color:' white ', eat(): Console. log(' ${this.name} ${this.color} cat is eating cat food '); void {console.log(' ${this.name} cat is eating cat food '); } } cat.eat(); Const pig: Animal = {color: 'white ', eat(): ${this.name} ${this.color} ${this.color} ${this.name} ${this.color} } } pig.eat();Copy the code

One day the dog’s white cat took it into his head to make himself green, which made me suddenly feel strange to him. To avoid this, it was decided not to let them dye.

Read-only property readonly

Some object properties can only change their value when the object is created. You can specify read-only properties with readonly before the property name

Interface Animal {name? : string; readonly color: string; eat(): void; } const cat: Animal = {name: Animal, color: 'white ', eat(): Console. log(' ${this.name} ${this.color} cat is eating cat food '); void {console.log(' ${this.name} cat is eating cat food '); }} // cat. // Cannot assign "color" because it is read-only. cat.eat();Copy the code

readonly vs const

The easiest way to determine whether to use readonly or const is to use it as a variable or as a property. Const as a variable, readonly as an attribute

Class types

Class implementation interface

Keyword implements interface name

Interface Animal {name? : string; readonly color: string; eat(): void; } // implements class Cat implements Animal {name? : string; readonly color: string; constructor(color: string, name? : string) { this.color = color; this.name = name; } eat(): void {console.log(' a little ${this.name} cat is eating cat food '); }} const cat = new cat (' white ', 'puppy '); // A white cat is eating cat food cat.eat();Copy the code

A class implements multiple interfaces

Interfaces are separated by,

Interface Animal {name? : string; readonly color: string; eat(): void; } interface Hobby { smoking(): void; drinking(): void; perm(): void; } class Cat implements Animal, Hobby { name? : string; readonly color: string; constructor(color: string, name? : string) { this.color = color; this.name = name; } eat(): void {console.log(' a little ${this.name} cat is eating cat food '); } smoking(): void {console.log(' a little ${this.name} cat is smoking '); } Drinking (): void {console.log(' a small ${this.name} cat is drinking '); } perm(): void {console.log(' a little ${this.name} cat is having a hot hair '); } yuFun(): void { this.smoking(); this.drinking(); this.perm(); }} const cat = new cat (' white ', 'puppy '); // a white cat is smoking // a white cat is drinking // a white cat is perming cat.yufun (); // a white cat is perming cat.yufun ();Copy the code

Interface Inheritance interface

With the development of society, today’s dogs have added the function of licking, and the dog interface needs to be redefined

interface Animal { name? : string; readonly color: string; eat(): void; } interface Hobby { smoking(): void; drinking(): void; perm(): void; } interface Dog extends Animal, Hobby { lick(): void; } class ScDog implements Dog { name? : string; color: string; Eat (): void {console.log(' a little ${this.name} dog is eating a bone '); } smoking(): void {console.log(' a little ${this.name} dog is smoking '); } Drinking (): void {console.log(' a little ${this.name} dog is drinking '); } perm(): void {console.log(' a little ${this.name} dog is having a hot hair '); } lick(): void {console.log(' lick the dog, the dog is the king '); } } const scDog = new ScDog(); Scdog. name = 'scdog. name '; Scdog. color = 'gold '; // A little golden dog is eating a bone scdog.eat (); // A little golden dog is smoking scdog.smoking (); // A little golden dog is drinking scdog.drinking (); // scdog.perm (); scdog.perm (); Lick (); // scdog.lick ();Copy the code