Search⌘ K
AI Features
Home
Courses
Mastering TypeScript

Introduction to Inheritance

Explore inheritance in TypeScript to understand how classes and interfaces derive properties and methods using the extends keyword. Learn to differentiate base and derived classes, implement multiple interfaces, and handle method overriding and abstract classes for enhanced object-oriented design.

We'll cover the following...

Inheritance in TypeScript

Inheritance is another paradigm that is one of the cornerstones of object-oriented programming. Inheritance allows us to create an object based on another object, thereby inheriting all of its characteristics, including properties and functions. In TypeScript, inheritance can be used by classes and interfaces. We will take a closer look at inheritance and what it means for both classes and interfaces.

When discussing inheritance, it is important to clearly distinguish between the class that forms the basis of the inheritance structure and the class that is doing all of the inheriting.

We will use the terms “base class” or “base interface” to denote the class or interface that forms the base of the inheritance structure, and the terms “derived class”* or “derived interface” to denote the class or interface that is doing the inheriting.

TypeScript uses the extends keyword to implement inheritance, and we will look at practical examples of its usage next.

Interface inheritance

One interface can form the base interface for one or many other interfaces.

As an example of this, consider the following code:

TypeScript 4.9.5
// Define an interface 'IBase' with a property 'id' of type number
interface IBase {
  id: number;
}
// Define an interface 'IDerivedFromBase' that extends 'IBase'
// This means that 'IDerivedFromBase' inherits the property 'id' from 'IBase'
// and adds a new property 'name' of type string
interface IDerivedFromBase 
  extends IBase {
  name: string;
}
// Define a class 'IdNameClass' that implements the interface 'IDerivedFromBase'
// This means that the class 'IdNameClass' must have all the properties specified in the 'IDerivedFromBase' interface
class IdNameClass
  implements IDerivedFromBase {
  name: string = "nameString";
}
Defining an interface inherited from a base interface

  • We define an interface named IBase ...