Understanding Inheritance in TypeScript | CodeSignal Learn

Understanding Inheritance in TypeScript | CodeSignal Learn

Introduction to Inheritance

Welcome back to our exploration of Object-Oriented Programming (OOP) in TypeScript. This unit's topic is Inheritance, a feature that can significantly enhance code reusability and efficiency.

Inheritance: First Example

Programming, especially OOP, often mirrors concepts found in the real world. Inheritance is one such trait - Child classes inherit characteristics from their Parent classes, akin to genetics in biology. Here is a concrete TypeScript demonstration of a Child class inheriting from a Parent class: TypeScript // Parent class class Parent {name: string; // name property constructor(name: string) {this.name = name;} greet(): void {console.log(`Hello, my name is ${this.name}`); // greet method}} // 'Child' class extending 'Parent' class Child extends Parent {age: number; // age property constructor(name: string, age: number) {super(name); this.age = age;} info(): void {console.log(`I am ${this.age} years old.`); // info method}} const child = new Child('Alice', 10); child.greet(); // prints: Hello, my name is Alice child.info(); // prints: I am 10 years old. In this instance, the Child class inherits from the Parent class, thereby sharing the greet() method. This is inheritance in action!

The 'extends' Keyword

We introduce the keyword extends for implementing inheritance. It's a potent keyword that allows a new class to inherit properties and methods from an existing class. In short, a Child class extends from a Parent class. For example, a Car extends a Vehicle . While both have the potential for movement, a Car has additional specific attributes — such as the number of wheels. TypeScript // Vehicle class class Vehicle {name: string; // name property speed: number; // speed property constructor(name: string, speed: number) {this.name = name; this.speed = speed;} move(): void {console.log(`${this.name} moves at ${this.speed} mph.`); // move method}} // 'Car' class extending 'Vehicle' class Car extends Vehicle {wheels: number; // new wheels property constructor(name: string, speed: number, wheels: number) {super(name, speed); // call to parent constructor this.wheels = wheels;} specs(): void {console.log(`I am a ${this.name} and I have ${this.wheels} wheels.`); // specs method}} const myCar = new Car('Toyota', 120, 4); myCar.move(); // prints: Toyota moves at 120 mph myCar.specs(); // prints: I am a Toyota and I have 4 wheels. In this demonstration, the Car class extends the Vehicle class, adopting the move() method.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Redefining and Overriding Methods using Inheritance

Occasionally during inheritance, a Child class might require a different method behavior than its Parent class. This is where method redefinition, or method overriding, comes into the picture. Method overriding enables a Child class to offer a different implementation of methods that are already defined in its Parent class. Using the same method name and parameters in the Child class, the Parent class's method can be overridden. Here's a practical example: class Parent {greet(): void {console.log('Hello from Parent');}} class Child extends Parent {// Method override greet(): void {console.log('Hello from Child');}} const child = new Child(); child.greet(); // prints: Hello from Child In this script, the Child class overrides the Parent class's greet() . When we invoke greet() on a Child instance, the Child class message is printed, not the Parent's. It's OOP's flexibility allowing us to tailor classes to meet their intended purpose. Handle it with care — respect the intended use of inherited methods and ensure your updated method is suitable for your class's needs!

The factor that unites the parent and child class is the super keyword. It calls the constructor of the parent class to enable the inheritance of its properties and methods. A real-world parallel would be an apple, a variety of fruit, inheriting from its parent category Fruit.

TypeScript

class Fruit {
    name: string; // name property

    constructor(name: string) {
        this.name = name;
        console.log(`Fruit's constructor called with name=${name}`);
    }

    printName(): void {
        console.log(`Fruit's name: ${this.name}`);
    }
}

class Apple extends Fruit {
    color: string; // color property

    constructor(name: string, color: string) {
        super(name); // calling parent class constructor
        this.color = color;
        console.log(`Apple's constructor called with name=${name}, color=${color}`);
    }

    printColor(): void {
        console.log(`Color of ${this.name} is ${this.color}`);
    }
}

let apple = new Apple('Apple', 'Red');
// Prints:
// Fruit's constructor called with name=Apple
// Apple's constructor called with name=Apple, color=Red

apple.printName(); // Prints: Fruit's name: Apple
apple.printColor(); // Prints: Color of Apple is Red

In the Apple class above, super calls the constructor of the Fruit class, inheriting the name property and the printName() method. If the Apple class didn't have any constructor, TypeScript would automatically call the parent's constructor when creating an instance of the Apple class.

TypeScript

class Parent {
    greet(): void {
        console.log('Hello from Parent');
    }
}

class Child extends Parent {
    // Method override
    greet(): void {
        console.log('Hello from Child');
    }
}

const child = new Child();
child.greet(); // prints: Hello from Child