Interfaces in TypeScript

One of the core functionalities in TypeScript, is interfaces. Interfaces makes us name the actual shape of a specific type - which then can be used for defining an object or even a class.

Basic examples

Let's start with a basic example. We will define a person interface with some attributes.

interface IPerson {
  name: string;
  age: number;
  heightCm: number;
}

const person1: IPerson = { name: "John Doe", age: 50, heightCm: 180 };

Optional property

In order to create an object with the type IPerson, all properties must be set accordingly. If we want to skip, let say, heightCm, we can make it optional like this:

interface IPerson {
  name: string;
  age: number;
  heightCm?: number;
}

const person1: IPerson = { name: "John Doe", age: 50 };

Multiple types on a property

If a property in the interface can have multiple values, we can define as many as we want with a | as separator.

interface IPerson {
  name: string;
  age: number;
  heightCm: number | string;
}

const person1: IPerson = { name: "John Doe", age: 50, heightCm: "180 cm" };

Property type as another interface

Our properties in the interface can be of any type. Meaning, we can specify properties to be of type of our interface. Example:

interface ISchool {
  name: string;
  address: string;
  students: IPerson[];
}

const school: ISchool = {
  name: "Harvard",
  address: "Cambridge, MA, United States",
  students: [{ name: "Mark Zuckerberg", age: 40, heightCm: 175 }],
};

Here we are using our IPerson interface inside of our ISchool interface as an array of students.

Extending an interface

If we have an inteface, and we decide to create another interface which has a lot of similiraties, but needs some extra properties, we can extend from our initial interface. Example:

interface IAnimal {
  name: string;
  weight: number;
  height: number;
}

interface IDog extends IAnimal {
  owner: IPerson;
}

const dog: IDog = {
  owner: { name: "Scott Turner", age: 28, heightCm: "178 cm" },
  height: 34,
  weight: 100,
  name: "Hooch",
};

So, by extending another interface, means that the interface that are extending will inherit all the properties. In above example, our IDog interface will get all the properties from IAnimal.

Extending multiple interfaces

There is also a possibility to extend from multiple interfaces, if needed. Example:

interface IDalmatian extends IAnimal, IDog {
  amountOfDots: number;
}

const pongo: IDalmatian = {
  owner: { name: "John Doe", age: 45, heightCm: "155 cm" },
  height: 25,
  weight: 40,
  name: "Pongo",
  amountOfDots: 200,
};

In above example we are inheriting from both IDog and IAnimal.

Functions and classes

As said above, properties can have any type.. So why not functions? We will now demonstrate how we can implement interfaces in classes as well.

interface IBasicMath {
  add: (a: number, b: number) => number;
}

class Math implements IBasicMath {
  add(a: number, b: number) {
    return a + b;
  }
}

Implementing multiple interfaces

Just as we can extend multiple interfaces, we can implement multiple interfaces as well.

interface IAdvanceMath {
  someAdvanceStuff: (x: number, y: number) => number;
}

class Math implements IBasicMath, IAdvanceMath {
  add(a: number, b: number) {
    return a + b;
  }
  someAdvanceStuff(x: number, y: number) {
    return x * y * y ** x;
  }
}

Generics in interfaces

Can we use generics in interfaces? Heck yeah!

If you are unfamiliar with generics, read this guide.

interface ICat extends IAnimal {
  livesLeft: number;
}

interface IBird extends IAnimal {
  wingSize: number;
}

interface IZooKeeper<A extends IAnimal> {
  favouriteAnimal: A;
}

const zooKeeper1: IZooKeeper<ICat> = {
  favouriteAnimal: {
    name: "Garfield",
    height: 20,
    weight: 8,
    livesLeft: 7,
  },
};

const zooKeeper2: IZooKeeper<IBird> = {
  favouriteAnimal: {
    name: "Eagle",
    height: 40,
    weight: 55,
    wingSize: 50,
  },
};

Outro

In todays post, we learned how we can use interfaces in different scenarios. They are one of the building blocks in TypeScript and should be used as much as possible. In order to make our applications as scalable and easy to understand as possible, interfaces plays an important role.

I hope you found this post interesting. Do you think something is missing? Any feedback is very welcome!

Have a great one!