How to Use Interfaces with Classes in TypeScript

When you start writing TypeScript, one of the first things you’ll notice is the interface keyword. Think of an interface as a contract – a promise that any class which claims to implement it will provide the listed properties and methods. It’s a neat way to keep your code predictable, especially in larger projects where many developers are juggling the same objects.

To make a class follow an interface, you simply add the implements clause after the class name. The class then has to flesh out every member the interface declares. Forgetting even one will make the compiler shout, giving you a helpful error before the code even runs.

Here’s the most straightforward example. Imagine a Shape interface that says every shape must be able to calculate its area:

interface Shape {
  calculateArea(): number;
}

Now we create a Rectangle class that promises to honor that contract:

class Rectangle implements Shape {
  width: number;
  height: number;

  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }

  calculateArea(): number {
    return this.width * this.height;
  }
}

const rect = new Rectangle(5, 10);
console.log(rect.calculateArea()); // 50

Notice how the class defines the two fields, a constructor to set them, and finally the calculateArea method. If we had omitted the method, TypeScript would have complained that the class does not correctly implement Shape. That’s the safety net interfaces give you.

Things get a little more interesting when a class needs to wear more than one hat. TypeScript lets a class implement several interfaces at once, merging their contracts. The syntax is just a comma‑separated list after implements:

interface Shape {
  calculateArea(): number;
}

interface Color {
  color: string;
}

class Circle implements Shape, Color {
  radius: number;
  color: string;

  constructor(radius: number, color: string) {
    this.radius = radius;
    this.color = color;
  }

  calculateArea(): number {
    return Math.PI  this.radius  this.radius;
  }
}

const circle = new Circle(5, 'red');
console.log(`Color: ${circle.color}`);
console.log(`Area: ${circle.calculateArea()}`);

In this snippet the Circle class must satisfy both Shape (by providing calculateArea) and Color (by exposing a color property). The output shows the colour string followed by the computed area, proving that the class indeed respects two separate contracts.

Why bother with multiple interfaces? It lets you compose behaviours cleanly. Suppose you have a logging interface, a serializable interface, and a UI‑renderable interface – a single class can adopt any combination that makes sense, without being forced into a deep inheritance hierarchy.

Keep a few practical tips in mind:

• Only declare the members you truly need in an interface; bloated contracts become a maintenance headache.
• Use descriptive names – IPoint, IClickable, etc. – so it’s obvious what each contract represents.
• If two interfaces happen to share a property with the same name but different types, TypeScript will flag a conflict. Align your designs early to avoid that.

In short, interfaces are a lightweight, compile‑time way to guarantee shape and behavior. Pair them with classes, and you get the best of both worlds: clear, enforced contracts and concrete, reusable implementations.