Interface

1. interface

   An interface is a grammatical structure used to describe the shape of an object. It defines what properties and methods an object should have, as well as their type. Interfaces can be used as type declarations, function parameters, class members, etc.

   Unlike classes, interfaces are not used as blueprints, but are just custom types.

   interface Person {
       name: string;
       age: number;
       greet(phrase: string): void; //How to write method 1, standard syntax form of function
       sayHello: () => void; //How to write method 2, in the form of type annotation
       greet(): (phrase: string) => void //Function overloaded form. Indicates that the greet function does not accept parameters, but returns a function.
   }

   
   

2. The difference between interface and custom type type

   In many cases, you can replace interface with type and it will work just like before. But interface and type are not exactly the same.

   1. Interface can only be used to describe the structure of an object, and type can also store other objects, such as union types, etc. However, when using an interface, it is clear that it is used to define the structure of an object.

   2. Classes should be described with interface instead of type. An interface can be thought of as a contract that a class must adhere to. If you use type to describe a class, you may lose some of the extra features provided by interface, such as extends and implements.

   
   

3. Use interface to implement the class

   To use the keyword implements (implementation). There is a difference between implementation and inheritance. You can implement multiple interfaces at one time, separated by ,.

   interface Greetable {
   name: string;
       greet(phrase: string): void;
   }
      
   class Person implements Greetable {}

   The class must contain the properties and methods in the implemented interface, and can write properties and methods outside the interface. Therefore, interfaces are often used to share functionality between different classes, regardless of the specific implementation of the functionality (because there can be no implementation or value in the interface). This is a bit like an abstract class, but the interface has no implementation details. By implementing interface, you can easily share functions between subclasses, and each subclass must add its own function implementation (fixed structure, different methods).

   
   

4. readonly modifier in interface

   Private and public modifiers cannot be added to the interface, but readonly can be added. It means that this property can only be set once in any object generated based on this interface, and is read-only thereafter. readonly can also be used on type.

   If a class implements this interface, even if the corresponding attribute in the class does not write readonly, it cannot be changed.

   
   

5. extends of interface

   Interfaces can extend other interfaces, similar to class inheritance.

   interface Named {
       readonly name: string;
   }
   interface Greetable extends Named {
       greet(phrase: string): void;
   }

   An interface can extend multiple interfaces, separated by ,.

   interface Greetable extends Named, AnotherInterface {
       greet(phrase: string): void;
   }

   
   

6. Use interface to define function structure

   In addition to defining object structures, interfaces can also be used to define functions. (In fact, custom type definition functions are more common)

   Note that the parameter is followed by : instead of =>. Also, no method name is added here, so it is an anonymous function.

   interface MyFunc {
       (a: number, b: number): number;
   }
   const add: MyFunc = (a, b) => a + b;
   console.log(add(2, 3)); // Output: 5

   
   

7. optional properties and methods

   Optional properties can be defined in interfaces and classes. Optional properties can be specified by adding ? after the property name.

   interface Named {
       readonly name: string;
       outputName?: string;
   }

   How to write optional methods:

   interface MyInterface {
     requiredMethod(): void;
     optionalMethod?(): void; //Function writing method 1
     sayHello?: () => void; //Function writing method 2
   }

   If you want to mark the properties initialized by the constructor in the class as optional, you need to use ? in both constructor() and the attribute type declaration of the class (Note: This is not rigorous, see the next paragraph) . Then when using new to create an instance, it is OK if there is no optional attribute in the parameter.

   In practice these ? are loosely related. For example, you can remove name: string as optional, mark ? in constructor(), and assign a default value in the constructor. Just make it logical.

   class Person implements Greetable {
       name?: string; //Use? Identificationoptional
       age: 30;
      
       constructor(n?: string){ //Use? Identificationoptional
           if(n) {
               this.name = n;
           }
       }
   }
      
   let user1 = mew Person(); //There can be no optional parameters

   
   

8. Interface in TS is compiled into JS code

   The interface does not exist after compilation into JS. The interface is pure TS functionality and is only available during development and compilation (pure development feature).