Typescript: Type VS Interface

Introduction

For those who are familiar or in the process of learning typescript (as I am) you’ve undoubtedly come across some similarities between object types and interfaces. As I myself learned delved into the use cases for both object types interfaces I came across a peculiar scenario: They both seem to be used interchangeably. I thought to myself as I’m sure many of you have or are: “but surely there is a difference between the two”. Indeed, when you compile your typescript into javascript you even get the same output using both of them. Observe:

typescript using both interface and an object type within app.ts

the resulting javascript within app.js that has been compiled from our typescript

Surely though there are some use case scenarios that are particular to each of these tools individually. In order to explore this further this article will review what an interface is and what an object type is in typescript. Then we will go in to an example where they both individually really shine.

What Is An Interface?

The best description of what an interface is that I have come across goes something like this: “An interface describes what an object should look like”. A good way of thinking about interfaces I’ve found is that of a tool whose sole responsibility is to define the shape of an object or provide a contract that a class has to adhere to. In this way an interface is a bit more strict than that of an object type. Lets go into an example where we use an interface in OOP. Because I am writing this during spring, I have decided to use butterflies and moths in this example…because why not? Here we will first define an interface called Larva that we will implement in both our Butterfly and Moth classes in order to enforce similar property requirements between the two.

Next we will define our two classes. Because these two will share a lot of similarities, I have decided to make Butterfly the parent class and Moth the child class through inheritance using the extends keyword.

I am maintaining the constructor functionality within the child class through use of the super keyword. The Larva interface is implemented in both classes due to Moth inheriting it from Butterfly through extends.

Now that we have our interface and classes set up lets instantiate one of each and check their values:

I am using comments to show what is logged.

Through this example we have hopefully shown that due to using the implements keyword with our Larva interface, the properties of species and movement as well as the method of metamorphosis were required to be present in both of our classes. If we had excluded them from either, typescript would have let us know we were not adhering to the Larva interface through a typescript error. It is important to note that object types can also be implemented on classes, but due to the less stringent requirements that type aliases allow for this is best done using an interface.

What Is An Object Type?

It is very important for me to clarify something at this point. This whole time when I’ve been saying “object type” I’ve actually been referring to a type alias you have defined for an object. Due to the board spectrum of data types available to type aliasing (some of which I have written about in a previous article) I found it convenient to keep it in reference to a javascript object up until now. Indeed a type alias for an object can do practically everything a interface can, and is even similarly used to define the shape of an object or a contract for a class. However there are some things simply using the keyword type allow us to do that an interface cannot. We will go into a particular scenario for this in the next section.

Using Interfaces And Types

We will now go into an example in which we have defined a common interface Creature and two interfaces with unique values called Mammal and Reptile that share keys with Creature.

We would now like to create a pet based on these interfaces. The problem we come across is when we create a new pet we do not know if we want this object to adhere to either the Mammal or Reptile interfaces, but we know we want it to be of one of them. This is where type aliasing can save us. We can create a new type alias called Pet that is a union type and will adhere to either Mammal OR Reptile.

we are creating a variable newPet that is of our new union type Pet

Now we are fairly certain we would like this newPet to be a cat. Lets give some key/values to this object and see what typescript will say its type is.

And now our newPet adheres to one of our desired interfaces!

Conclusion

While interfaces and type aliases for objects continue to be very similar. There are some syntactical differences between the two. Also it appears to be best practice to stick with interfaces when defining the shape of an object and use type aliasing to cover any advanced datatypes.