“This is the 18th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

This article is back to our favorite typescript chapter. This time we’re going to talk about another pair of confusing things in TS: extends and implements.

An overview of the

The extends extends and implements implements. The name “implements” extends and the name “implements” extends and the name “implements”. Then talk about the connection and difference between them, I believe that through this article can make you suddenly enlightened, come on, here we go

extends

Extends is actually more familiar to most of us. We use it to implement class or interface inheritance. Before listing how to use extends, we need to familiarize ourselves with the concepts of abstract classes and methods

Abstract classes and methods are identified by the abstract keyword. Abstract methods are defined in the abstract class and must be implemented. It is also important to note that you cannot create an instance of an abstract class with new

    abstract class AbstractParent {
        abstract abstractFunc():string
    }
    
    class child extends AbstractParent {
        abstractFunc():string {
            return ' '}}Copy the code

With that in mind, let’s take a look at the various ways extends can be used

  • Class derived class
    • Nonabstract Class Inheritance Nonabstract class: Simple property and method inheritance, not much more
    • Nonabstract classes inherit Abstract classes: Nonabstract classes need to implement abstract methods in the abstract class, but for attributes, nonabstract classes can inherit directly without defining them separately
    • Abstract Class inheritance non-abstract class: Simple property and method inheritance, not to mention
    • Abstract Class Inheritance Abstract classes: Simple property and method inheritance, not to mention
  • Class inheritance interface: cannot inherit, can only use implements
  • Interface inheriting class: It should be noted that when we define a class, we actually define a class and the corresponding type interface at the same time, so we can realize interface inheriting class, essentially interface inheriting interface
  • Interface Inheritance Interface: Simple property and method inheritance, not to mention

Here’s a code example to get a feel for how extends is used

    abstract class AbstractParent {
        abstract abstractFunc():string
    }
    class parent {
        func():string{
            return ' '}}// Non-abstract classes inherit from abstract classes
    class child1 extends AbstractParent {
        abstractFunc():string {
            return ' '}}// Non-abstract classes inherit from non-abstract classes
    class child2 extends parent {
        func2():string {
            return ' '}}// Abstract classes inherit from non-abstract classes
    abstract class child3 extends parent {
        abstract func3():string
         func3Real():string {
             return ' '}}// The abstract class inherits the abstract class
    abstract class child4 extends AbstractParent {
        abstract func4():string
        func4Real():string {
            return ' '}}// Interface inherits classes
    interface IExample extends AbstractParent{
        name:string
        age:number
    }
    interface IExample extends parent{
        name:string
        age:number
    }
Copy the code

implements

Implements are essentially used to implement interfaces in the following ways

  • Class implementation class
    • Non-abstract Class Implementation non-abstract class: All properties and methods in the implementation class are redefined and implemented in the target class
    • Non-abstract Classes Implement Abstract classes: All properties and methods in an abstract class need to be defined and implemented in a non-abstract class
    • Abstract classes implement Abstract classes: All properties of the implementation class are redefined in the target class, and all methods need to be implemented or defined as abstract methods using Abstract
    • Abstract classes implement non-abstract classes: All properties of non-abstract classes are redefined in the abstract class, and all methods need to be implemented or defined as abstract methods using Abstract
  • Class implementation interface
    • Abstract classes implement interfaces: all attributes of the interface need to be redefined, and all methods of the interface need to be implemented or defined as abstract methods using Abstract
    • Non-abstract classes implement interfaces: all attributes of the interface need to be redefined, and all methods of the interface need to be implemented
  • Interface implementation interface: An interface cannot implement an interface
  • Interface implementation classes: Interfaces do not implement classes

Here’s a code example to get a feel for how implements works

    abstract class AbstractParent {
        name:string
        abstract abstractFunc():string
    }
    class parent {
        name:string
        func():string{
            return ' '
        }
    }
    interface IExample {
        name:string
        age:number
        IExampleFunc():string
    }
    
    // Non-abstract classes implement abstract classes
    class child1 implements AbstractParent {
        name:string
        abstractFunc():string {
            return ' '}}// Non-abstract classes implement non-abstract classes
    class child2 implements parent {
        name:string
        func():string {
            return ' '}}// Abstract classes implement non-abstract classes
    abstract class child3 implements parent {
        name:string
        abstract func():string
        func3Real():string {
            return ' '}}// Abstract classes implement abstract classes
    abstract class child4 implements AbstractParent {
        name:string
        abstract abstractFunc():string
        func4Real():string {
            return ' '}}// The abstract class implements the interface
    abstract class child5 implements IExample {
        name:string
        age:number
        abstract IExampleFunc():string
        func5Real():string {
            return ' '}}// Non-abstract classes implement interfaces
    class child6 implements IExample {
        name:string
        age:number
        IExampleFunc():string {
            return ' '
        }
        func6Real():string {
            return ' '}}Copy the code

Extends and implements are different and related

I’m sure you can already tell the difference between the two. In this section, I’ll summarize the above and list the similarities between the two

  1. Can implement associations between classes
  2. Abstract methods in abstract classes must be implemented

Here are the differences

  1. Extends extends implements interface to interface and interface to class, but implements not interface to interface or interface to class
  2. Implements a class implementation interface, while extends does not implement a class inheritance interface
  3. With implements, you define or implement all properties and methods. With extends, you just redefine or implement methods

conclusion

For ts complex knowledge points, we must have a purpose and context to learn, otherwise we will only fall into the trap of knowledge, in short, we must have our own methodology, so that no matter learning knowledge or doing other things, can achieve twice the result with half the effort, well, I write here, over!