TypeScript is created on top of JavaScript, which adds static types. Having types is a wonderful thing for developers. Writing types will be hard, but you won’t regret it in the long run. TypeScript has all basic types like number, string, boolean, etc. Along with the basic type, TypeScript allows us to create custom types and define how an object looks with the help of Type Aliases and Interfaces, respectively. Let’s look at the basic syntax of Interfaces and Type Aliases.
Basic Syntax
Interfaces Interfaces will be declared with the interface keyword. Check the syntax of the interfaces below. Take a look at the sample example below. Type Aliases Type aliases will be declared using the type keyword. Check the syntax of type aliases below. Take a look at the sample example below. We have created a type for the Site using the interface and type alias. Both are valid and can be used for the object types mentioned in the examples. Only the syntax is different in the above example, which is obvious. Let’s continue exploring the differences between them to find more things.
Tuples
A tuple in TypeScript is a typed pre-defined length array. It defines the types of each index. We can declare tuples using type aliases. But we can’t do it using interfaces. Let’s see how to do it with type aliases. In the above example, we have defined the type for each index element for the array. If we give some other type in the array, TypeScript will throw an error. Can’t we do it with interfaces? We can’t do it exactly as we do it with type aliases. Interfaces are used for object types. So, we need to have the tuple inside the object to use it in interfaces. Let’s see an example. If you see the code, we have a tuple called details inside the Interface. So, we can use the tuples inside the interfaces. Similarly, we can use type aliases for single types like string, number, boolean, etc. As the Interface is used for the object types, we can use it for the single types like type aliases. Another interesting thing is that we can use the type alias tuple in the interfaces. Check the below example. Let’s get on to the next thing.
Declaration Merging – Interfaces
Declaration merging is use TypeScript to merge types of interfaces with the same name. Let’s see the example to get more clarity on it. If you see the above code, we have declared the Interface with the same name 3 times. TypeScript compiler will compile all those 3 forms into a single object type which includes all the types from the interfaces which have the same name. You can confirm the declaration merging by removing one key from the geekflare object. If you remove one of the keys from geekflare, you will see an error. We can’t do the same thing with type aliases. Most people don’t use that feature. In general, having multiple interfaces with the same name is confusing. Type alias fans, don’t worry about this feature of interfaces 😅.
Extends
Let’s say you have declared a type. Now, you want to declare another type along with the types of the previous type. In that case, we can extend the previous type. We can do it with both interfaces and type aliases. Let’s see them both. Interfaces There is a keyword called extends for this use case in TypeScript. We will use it to extend the interfaces. Let’s check the example. We have created Geekflare Interface by extending the Site Interface. All the types of Site will be present in Geeflare Interface along with their own types. You can remove name key from the geekflare variable to confirm it. We can extend multiple interfaces as follows. Try extending with more than 2 interfaces for fun. We can also extend type aliases with the Interface. We have extended only one type in the above example. You can extend as many as you want, similar to the previous example of extending multiple interfaces. Let’s see how to do it with type aliases. Type Aliases We can extend the type aliases using the intersection type in TypeScript. Let’s see an example. We have extended the Site type with founder for Geekflare type using the intersection (&). You can test it by removing one of the keys from the geekflare variable, which will throw an error. Similar to interfaces, we can extend multiple types as follows. We can also extend interfaces with type aliases the same as interfaces extending type aliases. Check the example below. Try extending the combination of type aliases and interfaces.
Implementing
This is not a difference between interfaces and type aliases. Just a feature of class to know. A class can implement both interface and type alias in the same way. Let’s see the examples for both of them. Interfaces Type Aliases Note: one thing to remember is that we can’t implement union (|) or intersection (&) types with classes.
Final Words
As you see in the articles, we can do everything with both type aliases and interfaces. So, we can’t strictly say that one is better than the other. In the end, it’s one’s personal choice to choose one of them. You will develop your style of using them eventually. Next, you can check out Typescript vs. Javascript. Happy Coding 🙂
