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).


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 DETAILSReal-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.