「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」。
本篇文章又来到了大家最喜欢的typescript环节，哈哈~这次准备跟大家聊聊在ts里另外一对容易混淆的家伙： extends 和 implements，废话不多说，开搞！
概述
extends翻译过来就是 继承，扩展 的意思，而implements翻译过来是 实现 的意思，从它俩的名字我们可以略微感受到二者的联系与区别，但又不能很清晰地表达出来，因此接下来我准备先介绍它俩各自的作用与用法，然后再讲讲它俩的联系与区别，我相信通过本篇文章一定可以让你豁然开朗的，来吧，开始了~
extends
extends其实对于我们来说应该是更熟悉的，我们多用它来实现类或者接口的继承，在列举使用方式之前，需要先熟悉下 抽象类 以及 抽象方法 的概念
抽象类和抽象方法都是使用 abstract 关键字来标识，抽象方法定义在抽象类中，并且必须被实现，还需要注意的一点是，无法通过 new 创建抽象类的实例，下面给出简单的代码示例
abstract class AbstractParent {
abstract abstractFunc():string
}
class child extends AbstractParent {
abstractFunc():string {
return ''
}
}
复制代码在有了上述知识储备后，我们来看下extends的各种使用方式
- 类继承类
- 非抽象类继承非抽象类：简单的属性与方法继承，不多说
- 非抽象类继承抽象类：非抽象类需要实现抽象类中的抽象方法，但对于属性，非抽象类可以直接继承，不用单独定义
- 抽象类继承非抽象类：简单的属性与方法继承，不多说
- 抽象类继承抽象类：简单的属性与方法继承，不多说
- 类继承接口：无法继承，只能使用implements
- 接口继承类：这里需要注意的是，我们在定义类时，其实是同时定义了一个类和类对应的类型接口，因此才可以实现接口继承类，本质上是接口继承接口
- 接口继承接口：简单的属性与方法继承，不多说
下面给出代码示例，直观感受下extends是如何使用的
abstract class AbstractParent {
abstract abstractFunc():string
}
class parent {
func():string{
return ''
}
}
// 非抽象类继承抽象类
class child1 extends AbstractParent {
abstractFunc():string {
return ''
}
}
// 非抽象类继承非抽象类
class child2 extends parent {
func2():string {
return ''
}
}
// 抽象类继承非抽象类
abstract class child3 extends parent {
abstract func3():string
func3Real():string {
return ''
}
}
// 抽象类继承抽象类
abstract class child4 extends AbstractParent {
abstract func4():string
func4Real():string {
return ''
}
}
// 接口继承类
interface IExample extends AbstractParent{
name:string
age:number
}
interface IExample extends parent{
name:string
age:number
}
复制代码implements
implements本质上是用来实现接口的，使用方式列举如下
- 类实现类
- 非抽象类实现非抽象类：实现类里面所有的属性和方法都要在目标类里重新定义和实现
- 非抽象类实现抽象类：抽象类里的所有属性和方法都需要在非抽象类里定义和实现
- 抽象类实现抽象类：实现类里面所有的属性都要在目标类里重新定义，所有方法需要被实现或者使用 abstract 定义为抽象方法
- 抽象类实现非抽象类：非抽象类里面所有的属性都要在抽象类里重新定义，所有方法需要被实现或者使用 abstract 定义为抽象方法
- 类实现接口
- 抽象类实现接口：接口所有属性都要重新定义，接口所有方法需要实现或者使用 abstract 定义为抽象方法
- 非抽象类实现接口：接口所有属性都要重新定义，接口所有方法需要实现
- 接口实现接口：接口不能实现接口
- 接口实现类：接口不能实现类
下面给出代码示例，直观感受下implements是如何使用的
abstract class AbstractParent {
name:string
abstract abstractFunc():string
}
class parent {
name:string
func():string{
return ''
}
}
interface IExample {
name:string
age:number
IExampleFunc():string
}
// 非抽象类实现抽象类
class child1 implements AbstractParent {
name:string
abstractFunc():string {
return ''
}
}
// 非抽象类实现非抽象类
class child2 implements parent {
name:string
func():string {
return ''
}
}
// 抽象类实现非抽象类
abstract class child3 implements parent {
name:string
abstract func():string
func3Real():string {
return ''
}
}
// 抽象类实现抽象类
abstract class child4 implements AbstractParent {
name:string
abstract abstractFunc():string
func4Real():string {
return ''
}
}
// 抽象类实现接口
abstract class child5 implements IExample {
name:string
age:number
abstract IExampleFunc():string
func5Real():string {
return ''
}
}
// 非抽象类实现接口
class child6 implements IExample {
name:string
age:number
IExampleFunc():string {
return ''
}
func6Real():string {
return ''
}
}
复制代码extends和implements区别与联系
通过上文的讲解，我相信你已经可以很清楚地区分它俩了，这一节我再总结一下上述内容，首先罗列下它俩的相同点
- 都可以实现 类与类 之间的关联
- 对于抽象类中的抽象方法都必须要实现
下面罗列它俩的不同点
- extends可以实现 接口与接口，接口与类 的继承，而implements不能实现接口与接口，接口与类的实现
- implements可以实现 类实现接口，而extends不能实现类继承接口
- 使用implements时，需要定义或实现所有属性和方法，而extends只需要重新定义或者实现方法即可，对于属性来说，是可以直接继承，无需单独定义
结语
对于ts纷繁复杂的知识点，我们一定要有目的和脉络地去学习，不然只会陷入知识的陷阱，简而言之，一定要有自己的方法论，这样无论是学习知识还是做其他事情，都能达到事半功倍的效果，好啦，就写到这里啦，over！