Typescript: Type VS Interface
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.
Now that we have our interface and classes set up lets instantiate one of each and check their values:
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?
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.
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!
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.