How to extend interfaces in TypeScript

In TypeScript, you can extend interfaces using the extends keyword. When one interface extends another, it inherits all the members (properties and methods) from the parent interface and can also add its own members or override the ones inherited.

By extending interfaces, you can create a hierarchy of interfaces and reuse common members across multiple interfaces while adding specific functionality to each child interface.

You can also extend multiple interfaces by separating them with commas. For example:

interface Shape {
  color: string;
}

interface Drawable {
  draw(): void;
}

interface Printable {
  print(): void;
}

interface Circle extends Shape, Drawable {
  radius: number;
}

interface Square extends Shape, Drawable, Printable {
  sideLength: number;
}

// Usage
const circle: Circle = {
  color: "red",
  radius: 5,
  draw() {
    console.log("Drawing circle...");
  }
};

const square: Square = {
  color: "blue",
  sideLength: 10,
  draw() {
    console.log("Drawing square...");
  },
  print() {
    console.log("Printing square...");
  }
};

console.log(circle.color); // Output: red
console.log(circle.radius); // Output: 5
circle.draw(); // Output: Drawing circle...

console.log(square.color); // Output: blue
console.log(square.sideLength); // Output: 10
square.draw(); // Output: Drawing square...
square.print(); // Output: Printing square...

Extending vs implementing interfaces

The difference between extending and implementing interfaces in TypeScript is the type of relationship they create between classes.

Extending an interface means creating a subclass that inherits all the properties and methods of the superclass. The subclass can override some of these and implement new ones, but the superclass stuff is already included. For example:

interface Animal {
  name: string;
  makeSound(): void;
}

interface Dog extends Animal {
  breed: string;
}

The interface Dog extends the interface Animal, which means that any object that implements Dog must also have a name and a makeSound() method, as well as a breed.

Implementing an interface means creating a class that conforms to the shape of the interface. The class must provide an implementation for all of the properties and methods of the interface. The class can have a different parent than the interface. For example:

interface Vehicle {
  wheels: number;
  start(): void;
}

class Car implements Vehicle {
  wheels: number;
  engine: string;

  constructor(wheels: number, engine: string) {
    this.wheels = wheels;
    this.engine = engine;
  }

  start(): void {
    console.log(`The car with ${this.wheels} wheels and ${this.engine} engine starts.`);
  }
}

The class Car implements the interface Vehicle, which means that any object that is an instance of Car must have a wheels property and a start() method. The class Car can also have other properties and methods that are not part of the interface, such as engine.

Difference between interface and class

The difference between an interface and a class in TypeScript is that an interface is a virtual structure that describes the shape of an object without providing any implementation or initialization for its properties and methods. A class is a blueprint that defines the properties and methods of an object and provides an implementation for them.

Some of the main differences are:

• An interface does not have a runtime representation and there is no code emitted for it. A class has a runtime representation and can be instantiated with the new keyword.
• An interface can only describe the public members of an object. A class can have private and protected members as well.
• An interface can extend multiple interfaces, creating a combination of all the interfaces. A class can only extend one class, but it can implement multiple interfaces.
• An interface can be used as a type annotation for variables, parameters, and return values. A class can also be used as a type annotation, but it also has its own type based on its constructor function.