Differences between Interfaces and Custom Types
Overview
TypeScript is a superset of JavaScript that includes a powerful static typing system. By adding types in the code, we can avoid errors early and get rid of errors at compilation. It is an interface that is an abstract type that tells the compiler which property names an object can have. There can be instances when we want to make an object that has a particular format or a function that returns a certain format. There comes the existence of custom types that can be used in our code.
Introduction
In TypeScript, an interface is an abstract type that defines the specification of an entity. It contains the names of all properties along with their types. TypeScript creates implicit interfaces when an object is defined with properties. Interfaces define properties, methods, and, events that are the members of interfaces. They contain only the declaration of the members, and they are defined by the derived class. Interfaces are used to validate objects passed as a parameter to a function.
Interface Explanation With Example
The interface is used to validate objects that are returned from a particular function. It is used to validate a specific structure of an entity.
TypeScript uses interfaces to achieve type-checking in our code. It contains only a declaration of methods and fields. We cannot use interfaces to build anything as it is not available for implementation. It is inherited by the class, and the class implement interface by defining all the members of the interface. To declare interfaces in TypeScript, We use the interface keyword. The keyword must be followed by the interface name. The interface body contains the declaration of members and the variables.
Example for Declaring Interfaces:
Output
Custom Types in TypeScript
Custom types are the creation of your types based on the basic data types that allow you to ensure the type checker validates the data structures specific to your project. This may reduce the chance of bugs in our project, and also allows better documentation of data structures that are used in our code. They can be used where programs have complex data structures and declaring your type will help you to address the complexity.
Example
Output
Difference Between Custom Type & Interface
There are differences between Interfaces and Custom Types. Some of them are:
| Interfaces | Custom Types |
|---|---|
| In TypeScript, An interface is defined as the syntax for the class that provides a way to define entities. This will accommodate the declaration of members that defines a structure for the derived class. | In TypeScript, a type is defined to declare a variable's data type which simply means type declaration is done for declaring names of different types like user-defined, built-in, or any other data types. |
| We use the interface keyword to declare an interface in TypeScript. | We use the type keyword to create new types in TypeScript. |
| They cannot be used with other types of declaration as done with type in TypeScript. | Types can be used with other types like unions, tuples, and primitives. |
| Interfaces can be extended with type alias or the interface can be extended by type also. | Type alias cannot be extended so we cannot extend Types in TypeScript. |
| Interface supports the use of an object. | Types don't support the use of an object. |
| Interface doesn't support the feature of union types as we cannot create a union interface using the combination of two types. Also, it doesn't support the declaration of tuples as it can be done using types. | In this, union types can have one or more types where we can have a new union type by merging two interfaces. It doesn't support the initialization of Tuples as it can be achieved using types. |
| Two interfaces with the same name can be merged. | Two types with the same name will generate an error. |
Some Key Differences Between TypeScript Type and Interface
Flexibility
Type or type alias in TypeScript is a type declaration that is used for the creation of variable names with a data type declared before the name where the variable can create names for a type such as a primitive declaration that includes a number, string, boolean, etc. Although, Interfaces are defined as a declaration of the only object type. This means that interfaces don't support any other type for declaration and it is restricted to the only object type. But, interfaces can indeed have more capabilities than Types in TypeScript. Therefore, Types are more flexible as compared to interfaces.
Merging Declarations
Types don't have the support for merging different multiple types. The compiler doesn't have the access to merge two or more type declarations that have the same name. If we try to merge the types, then the compiler will throw an error saying duplicate identifier. Although, interfaces support the feature of merging declarations as they can be defined multiple times and can be merged into a single interface.
Classes
Classes are static blueprints so we don't have access to implement or extend union types in a class. Hence, if we want to extend or implement union types using types, then the TypeScript compiler will throw an error.
Although, the interface supports implementation and extension features in TypeScript and also class can implement or extend the interface using implement and extends keywords.
Conclusion
- Creating custom types to represent the data structures used in our code is very useful and provides flexibility in our project.
- We can implement interfaces with two types in classes: static and instance.
- We saw how to declare an interface and its work along with the use cases. We can extend an interface using the extends keyword.
- By creating our custom types that represent the data structures that we used in our code can provide flexibility to our TypeScript project.
- Having our types in **our code enhances the overall developer experience when working in a team on the same code base.
- We were able to understand the difference between Custom Types & Interfaces.
- Hope this article has provided you with relevant information regarding the concept of Interfaces and Custom Types in TypeScript.