Interfaces: Building Contracts in TypeScript

Table of Contents

• Introduction
• What Are Interfaces in TypeScript?
  • Basic Syntax of Interfaces
  • Example: Defining an Interface
• Why Use Interfaces?
  • Structuring Code with Interfaces
  • Benefits of Using Interfaces
• Extending Interfaces
  • Syntax for Extending Interfaces
  • Example: Interface Extension
• Interface vs Type Alias
  • Key Differences
  • When to Use One Over the Other
• Implementing Interfaces in Classes
  • Syntax for Implementing Interfaces
  • Example: Implementing Interfaces in Classes
• Optional and Readonly Properties in Interfaces
  • Optional Properties
  • Readonly Properties
• Conclusion

Introduction

In TypeScript, interfaces are one of the most powerful tools for defining the structure of objects and enforcing type safety. An interface in TypeScript is like a contract that defines the shape of an object, specifying what properties and methods it should have. It plays a significant role in object-oriented programming (OOP) by providing a blueprint for classes and ensuring that objects adhere to a certain structure.

In this article, we will dive deep into TypeScript interfaces, explore their syntax and use cases, and show you how they help in building robust and type-safe applications. We will also compare interfaces with type aliases and cover some advanced topics like extending interfaces and implementing them in classes.

What Are Interfaces in TypeScript?

An interface in TypeScript is a way to define a contract for the structure of an object, including its properties and methods. Interfaces ensure that the object adheres to a specific shape, making it easier to reason about and maintain the code.

Basic Syntax of Interfaces

To define an interface in TypeScript, use the interface keyword followed by the interface name and the shape of the object it represents:

interface Person {
  name: string;
  age: number;
}

In this example, the Person interface defines the structure for an object with a name (string) and an age (number). Now, you can use this interface to type-check objects that conform to this structure.

Example: Defining an Interface

Here’s how you can use the Person interface to create an object:

const person: Person = {
  name: "John Doe",
  age: 30
};

The person object must have a name property of type string and an age property of type number, as defined in the Person interface. If you try to assign an object that doesn’t match this structure, TypeScript will raise a compile-time error.

Why Use Interfaces?

Interfaces are essential for several reasons, as they help you enforce structure, improve code readability, and maintain consistency across your codebase. Let’s explore the main reasons for using interfaces in TypeScript.

Structuring Code with Interfaces

Interfaces allow you to structure your code by clearly defining how objects should look. This is especially useful in larger projects, where different components or modules need to interact with each other. By enforcing consistent object shapes, interfaces help maintain a clean and predictable codebase.

For example, imagine you are working on a project that involves various data models. By defining interfaces for these models, you ensure that all related objects conform to a consistent structure:

interface Product {
  id: number;
  name: string;
  price: number;
}

interface Order {
  orderId: number;
  product: Product;
  quantity: number;
}

In this case, the Order interface relies on the Product interface, ensuring that all orders have a valid product with the necessary properties.

Benefits of Using Interfaces

1. Type safety: Interfaces help enforce the correct structure for objects and functions, reducing the chance of errors during runtime.
2. Reusability: Once you define an interface, it can be reused across your codebase to type-check multiple objects with the same shape.
3. Clarity: By using interfaces, you can clearly express the expected shape of data, making your code easier to understand for other developers.
4. Extensibility: Interfaces can be extended, allowing you to build on existing contracts without modifying the original structure.

Extending Interfaces

One of the powerful features of interfaces in TypeScript is the ability to extend them. Extending an interface means creating a new interface that inherits the properties and methods of an existing interface while adding new properties or methods. This helps in creating more specialized types while keeping the base contract intact.

Syntax for Extending Interfaces

To extend an interface, use the extends keyword:

interface Employee extends Person {
  jobTitle: string;
}

Here, the Employee interface extends the Person interface, meaning it inherits the name and age properties from Person and adds the jobTitle property.

Example: Interface Extension

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  jobTitle: string;
}

const employee: Employee = {
  name: "Alice",
  age: 28,
  jobTitle: "Software Engineer"
};

In this example, the Employee interface inherits the properties from Person and adds its own property, jobTitle. The employee object must satisfy the structure defined by the Employee interface.

Interface vs Type Alias

While both interfaces and type aliases can be used to define object shapes, there are some important differences between them. Here’s a comparison to help you decide when to use each:

When to Use One Over the Other

• Use interfaces when you want to define object shapes, especially if you plan to extend or implement them in classes.
• Use type aliases when you need more flexibility, such as defining unions, intersections, or even primitive types.

Implementing Interfaces in Classes

Interfaces are often used in object-oriented programming to define contracts for classes. Classes can then implement these interfaces to ensure they adhere to a specific structure.

Syntax for Implementing Interfaces

To implement an interface in a class, use the implements keyword:

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

class Dog implements Animal {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }

  makeSound() {
    console.log("Woof!");
  }
}

const dog = new Dog("Rex");
dog.makeSound();  // Output: Woof!

In this example, the Dog class implements the Animal interface. The class must provide the name property and the makeSound() method as specified by the interface.

Optional and Readonly Properties in Interfaces

TypeScript interfaces support two additional features: optional properties and readonly properties.

Optional Properties

Optional properties are properties that are not required to be present when creating an object. To mark a property as optional, use the ? symbol:

interface Product {
  id: number;
  name: string;
  price?: number;  // Optional property
}

const product: Product = {
  id: 1,
  name: "Laptop"
};

In this example, the price property is optional, so the product object can be created without it.

Readonly Properties

Readonly properties are properties that cannot be modified after the object is created. To make a property readonly, use the readonly keyword:

interface Product {
  readonly id: number;
  name: string;
}

const product: Product = {
  id: 1,
  name: "Laptop"
};

// product.id = 2;  // Error: Cannot assign to 'id' because it is a read-only property.

In this example, the id property is marked as readonly, so it cannot be modified after the object is created.

Conclusion

Interfaces are a fundamental feature in TypeScript, providing a way to define the structure of objects and ensuring type safety throughout your application. By using interfaces, you can create flexible, reusable, and type-safe code that adheres to clear contracts.

We’ve covered the basics of interfaces, their benefits, and advanced topics like extending interfaces and implementing them in classes. We’ve also highlighted the differences between interfaces and type aliases, helping you decide when to use each. By using interfaces effectively, you can build maintainable, scalable, and error-free TypeScript applications.