extends和implements的区别知多少？

本篇文章又来到了大家最喜欢的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区别与联系

通过上文的讲解，我相信你已经可以很清楚地区分它俩了，这一节我再总结一下上述内容，首先罗列下它俩的相同点

1. 都可以实现 类与类 之间的关联
2. 对于抽象类中的抽象方法都必须要实现

下面罗列它俩的不同点

1. extends可以实现 接口与接口，接口与类 的继承，而implements不能实现接口与接口，接口与类的实现
2. implements可以实现 类实现接口，而extends不能实现类继承接口
3. 使用implements时，需要定义或实现所有属性和方法，而extends只需要重新定义或者实现方法即可，对于属性来说，是可以直接继承，无需单独定义

结语

对于ts纷繁复杂的知识点，我们一定要有目的和脉络地去学习，不然只会陷入知识的陷阱，简而言之，一定要有自己的方法论，这样无论是学习知识还是做其他事情，都能达到事半功倍的效果，好啦，就写到这里啦，over！