Contact!

Implements and Extends, Object Oriented TypeScript

Implements and Extends, Object Oriented TypeScript

TypeScript uses implements and extends as keywords in class declarations. They are both ‘similar’, but fundamentally different. I’ve recently had developers get confused over the two so I thought I would put up a post for reference.

Note: To keep the tutorial simple we won’t be covering extending interfaces or mixing extends and implements.

When to use Implements

We use implements for implementing interfaces. Interfaces are like contracts and define a set of rules that an object must follow. If a class implements an interface then it has to implement all of the properties and methods defined in the interface.

interface GavsInterface {
    name: string;
    speak(): void;
}

class GavsClass implements GavsInterface {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    speak(): void {
        console.log(this.name);
    }
}

As you can see, my class is implementing my interface. This means that my class must provide an implementation for both the name property and speak() method.

Note: You can also use implements when interfacing from a Type. A Type is quite similar to an interface, but a lot more general. Types can also define primitive types, unions and intersections.

type BaseType = {
    name: string
}

class GavsClass implements BaseType {
    name: string;

    constructor(name: string) {
        this.name = name;
    }
}

When to use Extends

Extends is a bit different and is used to inherit properties and methods directly from another class. This means that when we extend a class, the new class will inherit all of the properties and methods from the base class. The new class can then add more of its own properties and methods.

class BaseClass {
    name: string = "Gav";

    speak(): void {
        console.log(this.name);
    }
}

class GavsClass extends BaseClass {
    age: number = 37;
    
    bio(): void {
        console.log(`${this.name} is ${this.age} years old`);
    }
}

Here, GavsClass extends the BaseClass and therefore inherits the properties and methods from BaseClass. We then implement the age property and bio() method in GavsClass. The bio() method is able to use the properties from the BaseClass because GavsClass has inherited the properties and methods.

We can also extend from abstract classes. Abstract classes are classes which can’t be instantiated directly. They are blueprints for other classes with both abstract and concrete methods.

abstract class AbstractClass {
    protected name: string;

    constructor(name: string) {
        this.name = name;
    }

    speak(): void {
        console.log(this.name);
    }
    
    abstract bio(): void;
}

class GavsClass extends AbstractClass {
    age: number;

    constructor(name: string, age: number) {
        super(name);

        this.age = number;
    }
    
    bio(): void {
        console.log(`${this.name} is ${this.age} years old`);
    }
}

With this example we can see some differences. We are declaring the bio() method as abstract, with no implementation. This means that GavsClass has to implement the method when it inherits from AbstractClass.

Note: In this example we are also using super() to call the base constructor. This is allowing us to set both name and age in the constructor of GavsClass.

You should use implements when you want to specify a set of rules, or ‘contract’, that a class must follow, and use extends when you want to create a subclass that inherits from a base class.

Join the discussion!

You might like:

Create, register and use shortcodes in WordPress

Create, register and use shortcodes in WordPress

by Gav 18/03/2023

Learn how to create and register your own WordPress shortcodes to add dynamic content to your posts and pages.

How to use guard clauses in JavaScript

How to/why use guard clauses in JavaScript

by Gav 16/03/2023

Learn how to improve code readability and performance by using guard clauses in JavaScript. Discover their benefits and best practices.

Implements and Extends, Object Oriented TypeScript

Implements and Extends, Object Oriented TypeScript

by Gav 15/03/2023

Learn the difference between implements and extends in TypeScript. Use Implements to implement interfaces and types, and extends to inherit from classes.

Reading/Parsing and Writing YAML files in PHP, Symfony

Reading/Parsing and Writing YAML files, PHP Symfony

by Gav 14/03/2023

In this tutorial we will look at using YAML in PHP. Learn about Parsing and Writing YAML files using Symfony's YAML component.

Measuring code execution performance in JavaScript

Measuring code execution performance in JavaScript

by Gav 13/03/2023

Measuring code execution performance is an important way to identify bottlenecks. Use these methods in JavaScript to help optimise your code.

Measuring script/code execution time in PHP using microtime

Measuring script/code execution time in PHP, microtime

by Gav 06/03/2023

Find bottlenecks, optimise and clean your code, and speed up your apps by measuring the execution time of your PHP scripts using microtime.

Regenerate WordPress media image sizes, programmatically

Regenerate WordPress media image sizes, programmatically

by Gav 25/02/2021

Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.

Magic Constants in PHP. What they are and how to use them.

Magic Constants in PHP. What they are and how to use them

by Gav 15/02/2021

Ever seen constants like __DIR__ and __FILE__ being used in PHP? These are 'Magic Constants', and this is how we can use them.

Detecting Keypress JavaScript

Detect single and multiple keypress events: JavaScript

by Gav 16/10/2019

Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!