Skip to main content

What is Inheritance 🤔

Inheritance is a fundamental concept in Object-Oriented Programming (OOP) that allows one class to inherit properties (attributes) and methods (functions) from another class, thereby promoting code reusability and modularity.

Inheritance In TypeScript​

Inheritance helps in creating a new class (derived class) from an existing class (base class) while maintaining the existing class's behavior and extending or overriding it to add new functionalities. In TypeScript, inheritance is implemented using the extends keyword.

Here's an example to illustrate inheritance in TypeScript:

// Base class: Animal
class Animal {
  protected name: string;

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

  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance} meters.`);
  }
}

// Derived class: Dog, which inherits from Animal
class Dog extends Animal {
  constructor(name: string) {
    super(name);
    // Calls the constructor of the base class
  }

  bark() {
    console.log("Woof! Woof!");
  }

  // Overriding the move method from the Animal class
  move(distance: number = 5) {
    console.log("The dog is running...");
    super.move(distance);
    // Calls the move method of the base class
  }
}

const myDog = new Dog("Max");
myDog.bark();
// Output: Woof! Woof!
myDog.move();
// Output: The dog is running...
//         Max moved 5 meters.

In this example, we have a base class Animal with a name attribute, a constructor, and a move method. We then create a derived class Dog that inherits from Animal using the extends keyword. The Dog class has its own bark method and overrides the move method from the Animal class. When creating a new Dog instance, we can use both the bark method from the Dog class and the move method from the Animal class (with the overridden behavior).

TypeScript Course Instructor Image
TypeScript Course Instructor Image

Time To Transition From JavaScript To TypeScript

Level Up Your TypeScript And Object Oriented Programming Skills. The only complete TypeScript course on the marketplace you building TypeScript apps like a PRO.

SEE COURSE DETAILS

Real-World Example​

JavaScript has built-in objects and prototypes that make use of inheritance through the prototype chain.

One such example is the Array object, which inherits from the built-in Object prototype. This means that all instances of Array inherit methods and properties from both the Array prototype and the Object prototype.

Here's an example to illustrate how inheritance works in the Array object:

// Create a simple array
const myArray = [1, 2, 3, 4, 5];

// Use methods inherited from the Array prototype
console.log(myArray.length); // Output: 5
myArray.push(6); // Add an element to the end of the array
console.log(myArray); // Output: [1, 2, 3, 4, 5, 6]

// Use methods inherited from the Object prototype
const arrayDescription = myArray.toString();
console.log(arrayDescription); // Output: "1,2,3,4,5,6"

In this example, myArray is an instance of the built-in Array object. It inherits methods like push() and properties like length from the Array prototype, as well as methods like toString() from the Object prototype.

When you create a custom object, you can make use of inheritance by linking the prototype chain. Here's an example using a custom object in JavaScript:

// Base "class": Shape
function Shape(color) {
  this.color = color;
}

Shape.prototype.getColor = function () {
  return this.color;
};

// Derived "class": Circle, which inherits from Shape
function Circle(color, radius) {
  Shape.call(this, color); // Call the Shape constructor
  this.radius = radius;
}

// Set up the prototype chain to inherit from Shape
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

// Add a new method to the Circle prototype
Circle.prototype.getArea = function () {
  return Math.PI * this.radius * this.radius;
};

const myCircle = new Circle("red", 5);
console.log(myCircle.getColor()); // Output: "red"
console.log(myCircle.getArea()); // Output: 78.53981633974483

In this example, we define a base "class" called Shape and a derived "class" called Circle. We set up the prototype chain for Circle to inherit from Shape using Object.create(). The Circle "class" then inherits the getColor method from the Shape "class" and adds a new method, getArea.

What Can You Do Next 🙏😊​

If you liked the article, consider subscribing to Cloudaffle, my YouTube Channel, where I keep posting in-depth tutorials and all edutainment stuff for software developers.

YouTube @cloudaffle