1、TypeScript Interface inheritance

Like the class , Interfaces can also be through keywords extents Inherit from each other . Interface inheritance , It is divided into ： Single inheritance and multiple inheritance , That is, inherit multiple interfaces . in addition , Interfaces can also inherit classes , It inherits the members of the class , But it does not include specific implementation , Only the members of the class will be regarded as a declaration . This article mainly summarizes TypeScript Interface inheritance , It is convenient for everyone to study systematically .

2、 Single inheritance 

interface Shape {
   name: string;
}

interface Circle extends Shape {
   radius: number;
}

let circle = {} as Circle;

//  Inherited  Shape  Properties of 
circle.name = "circle";
circle.radius = 10;

3、 Multiple inheritance 

interface Color {
   color: string;
}

interface Shape {
   name: string;
}

interface Circle extends Color, Shape {
   radius: number;
}

When an interface inherits other interfaces , The sub interface contains its own defined type members , It also includes type members in the parent interface . Under the case ,Circle The interface also inherits Style Interface and Shape Interface , therefore Circle The interface contains color、name and radius attribute ：

const c: Circle = {
   color: 'red',
   name: 'circle',
   radius: 10
};

4、 Compatibility of members with the same name in interface inheritance

In interface inheritance , Members with the same name may appear , Facing the situation of members with the same name , How to deal with it ？ Mainly divided into the following two cases ：

4.1、 The types of members with the same name must be compatible

If there is a type member with the same name between the child interface and the parent interface , Then the type members in the sub interface have higher priority . meanwhile , The type members with the same name in the child interface and the parent interface must be type compatible . in other words , The type of the member with the same name in the child interface needs to be able to assign to the type of the member with the same name in the parent interface , Otherwise, a compilation error will be generated . Examples are as follows ：

interface Style {
   color: string;
}

interface Shape {
   name: string;
}

interface Circle extends Style, Shape {
   name: 'circle';

   color: number;
//  ~~~~~~~~~~~~~
//   Compile error ：'color'  incompatible types ,
//  'number'  Type cannot be assigned to  'string'  type 
}

Circle The interface also inherits Style Interface and Shape Interface .Circle There is a property with the same name between the interface and the parent interface name and color.Circle Interface name The type of attribute is string literal type 'circle', It can be assigned to Shape Interface string Type of name attribute , So it's right . and Circle Interface color The type of property is number, It cannot be assigned to Color Interface string Type of color attribute , So there are compilation errors .

4.2、 Members with the same name must be of the same type

If there are only type members with the same name between multiple parent interfaces , The sub interface itself has no member of the type with the same name , Then the type of the member with the same name in the parent interface must be exactly the same , Otherwise, a compilation error will be generated . Examples are as follows ：

interface Color {
   draw(): { color: string };
}

interface Shape {
   draw(): { x: number; y: number };
}

interface Circle extends Style, Shape {}
//        ~~~~~~
//         Compile error

Circle The interface also inherits Color Interface and Shape Interface .Color Interface and Shape Each interface contains a named draw Methods , But the return value types of the two are different . When Circle The interface tries to put two draw Method merge conflicts , Therefore, there is a compilation error .

One way to solve this problem is , stay Circle Interface defines a with the same name draw Method . such Circle Interface draw Methods will have higher priority , So as to replace draw Method . At this time, the compiler will no longer perform type merging , Therefore, there will be no merger conflict . But be careful ,Circle Defined in interface draw Methods must be associated with draw Methods are type compatible . Examples are as follows ：

interface Color {
   draw(): { color: string };
}

interface Shape {
   draw(): { x: number; y: number };
}

interface Circle extends Color, Shape {
   draw(): { color: string; x: number; y: number };
}

Circle There is a... Defined in the interface draw Method , Its return value type is “{ color: string; x: number; y: number }”. It can be assigned to “{ color: string }” type , Can also be assigned to “{ x: number; y: number }” type , Therefore, there will be no compilation errors .

5、 Interface inheritance class

Interfaces can inherit from classes , But you can only inherit members of classes , Will not inherit the implementation of class members .

class Person{
    name:string = 'Tom'
    age: number = 20
    sayHello():void{
        console.log('Hello world');
    }
}

interface IPerson extends Person{
}
class Peter extends Person implements IPerson{}

The above code will not report an error , because Peter Class inherited Person class , Already has Person Members of the , Then realize IPerson Interface , Even if you don't write the content, you won't report an error 

class Gary implements IPerson{}

The above code reports an error , If you directly implement the interface, you will report an error , Because the interface inherits Person class , So the attributes in the interface should also be in the class Gary Define and implement

Link to the original text ：http://www.mybatis.cn/typescript/1981.html