What are Interfaces and how to use them in TypeScript

Interfaces are a fundamental tool in object-oriented programming, as they allow us to define the structure and behavior of an object.

An interface in TypeScript allows us to define the structure of an object by specifying the names and types of its properties and methods.

Subsequently, classes can implement this interface (in this case, they must define all the variables and methods included in the interface).

Declaring an interface

To declare an interface in TypeScript, we use the keyword interface followed by the name of the interface and the properties and methods we want to define. Let’s see an example:

interface Person {
  name: string;
  age: number;
  greet(): void;
}

Implementing an interface in a class

Once we have declared an interface, we can implement it in a class using the keyword implements. This establishes that the class must implement the variables and methods declared by the interface.

Let’s see an example:

class Student implements Person {
  name: string;
  age: number;

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

Implementation of multiple interfaces

A class can implement multiple interfaces, ensuring that it adheres to various contracts.

interface Flyer {
    fly(): void;
}

interface Swimmer {
    swim(): void;
}

class Duck implements Flyer, Swimmer {
    fly(): void {
        console.log("The duck is flying.");
    }

    swim(): void {
        console.log("The duck is swimming.");
    }
}

const duck = new Duck();
duck.fly(); // The duck is flying.
duck.swim(); // The duck is swimming.

Extending interfaces

TypeScript allows the extension of interfaces, enabling the creation of more specific interfaces based on other interfaces.

interface Animal {
    name: string;
}

interface Pet extends Animal {
    vaccinations: boolean;
}

const pet: Pet = { name: "Firulais", vaccinations: true };
console.log(pet); // { name: "Firulais", vaccinations: true }

Optional properties

Optional properties are defined by adding a question mark (?) after the property name. This indicates that the property may not be present in the object.

interface Book {
    title: string;
    author?: string;
}

const book1: Book = { title: "Basic TypeScript" };
const book2: Book = { title: "Advanced TypeScript", author: "Luis Pérez" };

Read-only properties

Read-only properties are defined using the keyword readonly. This ensures that the property cannot be modified after its initialization.

interface Point {
    readonly x: number;
    readonly y: number;
}

const point: Point = { x: 10, y: 20 };
// point.x = 5; // Error: Cannot assign to 'x' because it is a read-only property.