What is the difference between Type and Interface in TypeScript?

Tram Ho

An Interface is a way to describe a data type , such as an object. Unlike an Interface , Type can name any data type, including primitive data types, unified data types, and intersect data types.

What are interfaces?

An Interface would look like this:

Above we defined an Interface named Human , and then used it to create a variable james . Interfaces are useful in the way that we can always be sure that the objects we create have the same properties. And if we happen to create a variable with Interface Human , with other Properties , then TypeScript will show an error.

What is Type?

When creating a type , you’re not actually creating a new Type, you’re creating a new name for a Type, that’s why it’s called type alias .

Before you get too confused, here is a similar example for you:

Ben has a laptop , but instead of calling it a laptop , he calls it Code Maker , because Ben is very fastidious and likes to call it cool.

As we can see above, the Properties of Laptop and CodeMaker are exactly the same. Why do we need to create another Type with the same Properties, just because Ben wants to call it “ Code Maker ” instead of laptop like everyone else? That’s not very fair.

John said: “If Ben calls his laptop Code Maker , then I want to call my laptop The Machine.”

Now we have 3 different names that basically describe the same thing. Let’s simplify it by doing something with type but interface can’t do.

Instead of declaring Laptop 3 times, Ben and John just created the type aliases of Laptop and called it whatever they wanted. And of course, although people call laptops by many different names, it is still a laptop after all. So the code below is perfectly valid.

Unlike an Interface declaration, which always introduces a named object type, a type aliases can give a name to any Type, including primitive data types, unified data types, and types. intersecting data.

We can also set type aliases for primitive data types , which is something the interface cannot do. Take the following example:

Interface vs Type

Here is a quick breakdown of Interface and Type.

1. Both support inheritance, although the syntax is different

2. Interface supports merged declarations , but Type does not

Merged declarations is when you declare two types with the same name it will merge them together.

3. Type supports type aliases for primitive data types and all other types. Interfaces are not

So… when should I use Interface and when should I use Type ?

You should start by thinking about what you want to achieve first, then decide which one to use. Do you need to inherit Interface or not?. Need to create type aliases for primitive data types?. Do you need the Merged declarations for the Interface?

Ask questions before you want to do anything. That’s the best way for you to handle any problem.

Roundup

As always, I hope you enjoyed this article and learned something new.

Thank you and see you in the next posts!

If you find this blog interesting, please give me a like and subscribe to support me. Thank you.

Ref

Share the news now

Source : Viblo