What's the difference between 'extends' and 'implements' in TypeScript

davejoem picture davejoem · Aug 8, 2016 · Viewed 81.7k times · Source

I would like to know what Man and Child have in common and how they differ.

class Person {
  name: string;
  age: number;
}
class Child extends Person {}
class Man implements Person {}

Answer

Radim Köhler picture Radim Köhler · Aug 8, 2016

Short version

  • extends means:

The new class is a child. It gets benefits coming with inheritance. It has all properties, methods as its parent. It can override some of these and implement new, but the parent stuff is already included.

  • implements means:

The new class can be treated as the same "shape", while it is not a child. It could be passed to any method where the Person is required, regardless of having different parent than Person

More ...

In OOP (languages like C#, Java) we would use

extends to profit from inheritance (see wiki). Small cite:

... Inheritance in most class-based object-oriented languages is a mechanism in which one object acquires all the properties and behaviours of the parent object. Inheritance allows programmers to: create classes that are built upon existing classes ...

implements will be more for polymorphism (see wiki). Small cite:

... polymorphism is the provision of a single interface to entities of different types...

So, we can have really different inheritance tree of our class Man.

class Man extends Human ...

but if we also declare that we can pretend to be a different type - Person:

class Man extends Human 
          implements Person ...

.. then we can use it anywhere, where the Person is required. We just have to fulfill Persons's "interface" (i.e. implement all its public stuff).

implement other class? That is really cool stuff

Javascript's nice face (one of the benefits) is the built-in support of the Duck typing (see wiki). Small cite:

"If it walks like a duck and it quacks like a duck, then it must be a duck."

So, in Javascript, if two different objects... would have one similar method (e.g. render()) they can be passed to a function which expects it:

function(engine){
  engine.render() // any type implementing render() can be passed
}

To not lose that - we can in Typescript do the same - with more typed support. And that is where

class implements class

has its role, where it makes sense

In OOP languages as C# ... no way to do that...

Also The documentation should help here:

Interfaces Extending Classes

When an interface type extends a class type it inherits the members of the class but not their implementations. It is as if the interface had declared all of the members of the class without providing an implementation. Interfaces inherit even the private and protected members of a base class. This means that when you create an interface that extends a class with private or protected members, that interface type can only be implemented by that class or a subclass of it.

This is useful when you have a large inheritance hierarchy, but want to specify that your code works with only subclasses that have certain properties. The subclasses don’t have to be related besides inheriting from the base class. For example:

class Control {
    private state: any;
}

interface SelectableControl extends Control {
    select(): void;
}

class Button extends Control implements SelectableControl {
    select() { }
}

class TextBox extends Control {
    select() { }
}

// Error: Property 'state' is missing in type 'Image'.
class Image implements SelectableControl {
    private state: any;
    select() { }
}

class Location {

}

So, while

  • extends means - it gets all from its parent
  • implements in this case is almost like implementing an interface. Child object can pretend that it is parent... but it does not get any implementation