DEV Community

Remon Fawzi
Remon Fawzi

Posted on • Edited on

Typescript interfaces vs type aliases

In TypeScript there are two ways for defining the shape of an object.

Using interfaces:

interface Person {
     name: string;
     age: number;
}
Enter fullscreen mode Exit fullscreen mode

Using type alias:

type Person = {
     name: string;
     age: number;
}
Enter fullscreen mode Exit fullscreen mode

What are the differences between them?

1- Interfaces can only define the shape of objects, but types can be used to define any type.

type MyVar = string | number; // we can't do this with interfaces
Enter fullscreen mode Exit fullscreen mode

2- Interfaces can be reopened

interface Person {
     name: string;
}

interface Person {
     age: number;
}

// Person must have the two properties name and age
const john: Person = {
     name: "John",
     age: 20
}

// This could be very helpful if I'm using an interface from a third-party library, so I can add more properties to the imported interface without creating a new one.
Enter fullscreen mode Exit fullscreen mode

3- Interfaces can be inherited using the extends keyword

interface Animal {
     name: string;
}
interface Dog extends Animal {
     age: number;
}

// Multiple inheritance
interface Patient {
     id: number;
}

interface Husky extends Dog, Patient {
     order: number;
}
Enter fullscreen mode Exit fullscreen mode

Inheritance can also be implemented with type alias using the & intersection operator

type Animal = {
     name: string;
};
type Dog = Animal & {
     breed: string;
};
Enter fullscreen mode Exit fullscreen mode

Conclusion:

  1. Interfaces are used to define objects' shapes.
  2. Interfaces can be reopened.
  3. Interfaces can be inherited using the extends keyword.
  4. Both interfaces and type aliases can be used to define objects' shapes, but interfaces make more sense as they look more familiar when it comes to inheritance and OOP concepts.

Top comments (6)

Collapse
 
xwero profile image
david duymelinck • Edited

I'm not a Typescript developer. At first I didn't understand why Typescript has a type keyword.

In OOP you have primitive and composite types that the language provides, and custom types in the form of interfaces and objects.

After a quick search the type keyword is used to name a collection of types or a custom definition.
And that makes sense. The definition of the type keyword is type alias.

So this post is comparing apples with oranges.

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

I wish the article covered all differences. You're not covering recursion here at the very least.

Collapse
 
peiche profile image
Paul

It's very surface-level and provides no insight into why a developer might choose one over the other.

Collapse
 
ryabkov_alex profile image
Alexander Ryabkov

We don’t use interfaces in our projects because TS types give us all the power we need.

Collapse
 
reactoholic profile image
Petar Kolev

I highly suggest all of you friends to watch what Matt Pocock has to say about type vs interface on YT

Collapse
 
xwero profile image
david duymelinck • Edited

Is this the video?
His message seems to be do whatever you want. And his preferred way is use interfaces if you need the functionality it provides and if not use type.
I also find it strange that he changed his opinion based on a typescript puzzle. Puzzles are meant to get creative in your language, not to use the outcome in production code.

The type keyword is also in Go and Rust, only Swift uses the typealias keyword. Which is in my opinion a better name in Typescript.
I think the Typescript developers made the intersection of typing too powerful. Types in Go use composition to join types, and in Rust it is done with traits. I think both of those ways are closer to OOP than in Typescript.

Also why is it possible to have multiple interface definitions with the same name? And on top of that the interfaces will merge.
The only languages I know where it doesn't result in an error are Python and Ruby. But there the interface that is defined last overwrites the ones before.

Typescript is getting weirder by the day for me.