When to Use Interface vs. Class in Typescript

One of the key features of TypeScript is the ability to define custom types, which allows developers to create robust and maintainable code. When working with TypeScript, you’ll often find yourself deciding between using interfaces and classes. In this article, we’ll explore the strengths and best use cases for both, helping you make informed decisions in your projects.

Understanding Interfaces

Interfaces in TypeScript provide a way to define contracts for objects. They allow you to specify the structure and behavior that an object should adhere to. Interfaces are a powerful tool for defining the shapes of objects and ensuring consistency across your codebase.

Use Cases for Interfaces

1. Defining Object Shapes: When you want to ensure that an object has a specific set of properties and their respective types, interfaces are the perfect choice. For example:

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}

2. Implementing Contracts: If you have multiple classes that need to adhere to a specific set of rules or have common functionality, interfaces can be used to enforce this contract.

interface Shape {
  calculateArea(): number;
}

class Circle implements Shape {
  radius: number;

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

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

3. Extending Interfaces: You can extend interfaces to create more specific contracts. This allows you to build upon existing definitions and create more specialized interfaces.

interface Employee {
  id: number;
  name: string;
}

interface Manager extends Employee {
  department: string;
}

Exploring Classes

Classes in TypeScript are a fundamental concept inherited from object-oriented programming (OOP). They allow you to define blueprints for objects and encapsulate data and behavior into a single unit.

Use Cases for Classes

1. Creating Instances: Classes are used when you need to create multiple instances of a particular entity. For example, if you’re building a system with various users, you would use a class to represent each user.

class User {
  username: string;
  password: string;

  constructor(username: string, password: string) {
    this.username = username;
    this.password = password;
  }

  login() {
    // Logic to handle user login
  }
}

2. Inheritance and Polymorphism: If you need to create a hierarchy of objects with shared characteristics, classes are the way to go. Subclasses can inherit properties and methods from a parent class.

class Animal {
  name: string;

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

  makeSound() {
    // Default sound
  }
}

class Dog extends Animal {
  makeSound() {
    return 'Bark!';
  }
}

class Cat extends Animal {
  makeSound() {
    return 'Meow!';
  }
}

3. Encapsulation: Classes allow you to encapsulate data and behavior. You can control access to certain properties and methods, making your code more secure and maintainable.

class BankAccount {
  private balance: number = 0;

  deposit(amount: number) {
    this.balance += amount;
  }

  withdraw(amount: number) {
    if (amount <= this.balance) {
      this.balance -= amount;
    } else {
      console.log('Insufficient funds');
    }
  }
}

Choosing between an Interface and a Class

Choosing between interfaces and classes largely depends on the problem you’re trying to solve. In many cases, you’ll find that they complement each other. For instance, you might use an interface to define the shape of an object and then implement it in a class to provide the functionality.

Remember, interfaces focus on defining shapes, while classes are about instantiable blueprints with behavior. By understanding their strengths and best use cases, you can write more maintainable, scalable, and readable code in TypeScript.