TypeScript 接口继承详解：单继承、多继承与类继承

1、TypeScript 接口继承

与类相似，接口支持通过 extends 关键字进行相互继承。接口继承主要包含两种形式：单继承和多继承，其中多继承允许一个接口同时继承多个父接口。此外，接口还可以继承类，此时接口将获取类的成员声明，但不包含具体的实现逻辑。本文旨在系统梳理 TypeScript 接口继承的相关知识点，便于读者全面掌握。

2、单继承

interface Shape {
   name: string;
}

interface Circle extends Shape {
   radius: number;
}

let circle = {} as Circle;
 
// 继承了 Shape 的属性
circle.name = "circle";

circle.radius = 10;

3、多继承

接口支持对接口进行继承操作，这与类的单继承限制不同。接口既可以实现单继承，也可以实现多继承，即在 extends 关键字后使用逗号分隔多个父接口。

interface Color {
   color: string;
}

interface Shape {
   name: string;
}

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

当一个接口继承其他接口后，子接口将同时包含自身定义的类型成员以及所有父接口中的类型成员。例如，Circle 接口同时继承了 Style 接口和 Shape 接口，因此 Circle 接口中包含了 color、name 和 radius 属性。

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

4、接口继承中的同名成员的兼容问题

在接口继承场景中，可能会遇到同名成员的情况。针对此类问题，处理方式主要分为以下两种情形：

4.1、同名成员的类型必须兼容

若子接口与父接口存在同名的类型成员，子接口中的成员具有更高优先级。同时，子接口与父接口中同名类型成员的类型必须相互兼容。具体而言，子接口中同名成员的类型必须能够赋值给父接口中同名成员的类型，否则将引发编译错误。示例如下：

interface Style {
   color: string;
}

interface Shape {
   name: string;
}

interface Circle extends Style, Shape {
   name: 'circle';
   color: number;
//  ~~~~~~~~~~~~~
//  编译错误：'color' 类型不兼容，
//  'number' 类型不能赋值给 'string' 类型
}

在 Circle 接口同时继承 Style 接口和 Shape 接口的示例中，Circle 接口与父接口存在同名属性 name 和 color。Circle 接口中 name 属性的类型为字符串字面量类型 'circle'，该类型可以赋值给 Shape 接口中的 string 类型，因此编译通过。然而，Circle 接口中 color 属性的类型为 number，无法赋值给 Style 接口（原文误写为 Color 接口，结合上下文应为 Style 或定义该属性的父接口）中 string 类型的 color 属性，从而导致编译错误。

4.2、同名成员的类型必须相同

如果仅是多个父接口之间存在同名的类型成员，而子接口本身未定义该同名类型成员，则要求父接口中同名类型成员的类型必须完全一致，否则将产生编译错误。示例如下：

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

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

interface Circle extends Style, Shape {}
//        ~~~~~~
//        编译错误

在 Circle 接口同时继承 Color 接口和 Shape 接口的示例中，Color 接口和 Shape 接口均包含一个名为 draw 的方法，但两者的返回值类型不同。当 Circle 接口尝试合并这两个 draw 方法时发生冲突，因此产生编译错误。

解决上述冲突的一种方法是在 Circle 接口中定义一个同名的 draw 方法。此时，Circle 接口中的 draw 方法将拥有更高优先级，从而覆盖父接口中的 draw 方法。编译器将不再执行类型合并操作，因此不会发生合并冲突。需要注意的是，Circle 接口中定义的 draw 方法必须与所有父接口中的 draw 方法类型兼容。示例如下：

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 接口中定义了一个 draw 方法，其返回值类型为 '{ color: string; x: number; y: number }'。该类型既能赋值给 '{ color: string }' 类型，也能赋值给 '{ x: number; y: number }' 类型，因此不会产生编译错误。

5、接口继承类

接口可以对类进行继承，但仅继承类的成员声明，不继承类成员的具体实现逻辑。

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

interface IPerson extends Person{

}

class Peter extends Person implements IPerson{}

上述代码不会报错，因为 Peter 类继承了 Person 类，已经具备了 Person 中的成员，再去实现 IPerson 接口时，即使接口中不写内容也不会报错。

class Gary implements IPerson{}

上述代码会报错，直接实现接口就会报错，因为接口继承了 Person 类，所以接口中的属性也应该在类 Yannis（原文示例中为 Gary，但描述提及 Yannis，此处保留原文描述逻辑或修正为示例类名，根据 protected_context a8 是 Gary implements IPerson 报错，故修正为 Gary）中定义并实现。

6、参考

http://www.mybatis.cn/typescript/1981.html

到此这篇关于 TypeScript 接口继承的文章就介绍到这了，更多相关 TypeScript 接口继承内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！