Updated April 1, 2023
Difference between TypeScript type vs interface
In Typescript, the interface is defined as the syntax of the class for implementing the class members where the interface can be referenced by the class object, therefore the typescript compiler uses an interface for type-checking or duck typing, and hence in general we can say typescript interface refers to data shapes of objects of the class which is responsible for defining properties, methods, and events where this interface structure will be followed by the derived class. Typescript, the type is defined as to define those data types of the variables which can be built-in, user-defined, or any other data types which are defined before declaring any variable that is used as an input in the program. In this topic, we are going to learn about TypeScript type vs interface.
Head to Head Comparison Between TypeScript type vs interface (Infographics)
Below are the top differences between TypeScript type vs interface.
Key Differences between TypeScript type vs interface
1. Flexibility
Type or type alias in typescript is defined as type declaration for creating a variable name with a data type declared before the name where it can create names for a type such as primitive type declaration which includes a number, string, Boolean, null, etc and the type can also declare union, intersection and tuple type also.
Whereas interfaces are defined as a declaration of the only object type, which means the interfaces are restricted to only object type and do not support any other type for declaration. But we can say that interfaces have more capabilities than types in typescript. Hence in typescript, it is said types are more flexible than the interface.
Syntax:
The syntax formats for both type and interface are almost the same. They are:
For type:
type type_name = {
// variable declaration with type and variable name
}
For interface
interface interface_name {
// variable declaration or method declaration
}
2. Merging the declarations
In Typescript, type does not support the feature of merging different multiple types, where the compiler cannot merge the two or more type declaration that have the same name as for global or module scope type is a unique type entity and if we try to merge the types then it would throw a compiler error saying duplicate identifier. Whereas, the interface supports this feature that is the interface can be defined various times and it can be then merged into a single interface which cannot be done with types.
3. Classes
In typescript, type does not support the feature of implementing or extending union types in the class as we know that classes are static blueprints where the class cannot implement or extend that is it cannot exist in one or another class structure and if is done using types it will throw an error. Whereas, interface supports the implementation and extend feature in typescript and hence class can implement or extend interface using “implement” and “extend” keywords.
4. Few Aspects
Type can describe functions, constructors, tuples but it cannot be implemented or extended in class, and also it cannot be augmented or recursive. Whereas, the interface can also describe functions, constructors, tuples, and also it can be implemented and extended in the class that also support the aspect that it can be augmented and also can be recursive when compared to types in Typescript.
Comparison Table of TypeScript type vs interface
Below given is the comparison table depicting the head to head differences between the TypeScript type vs interface:
| S.NO | Typescript type | Typescript interface |
| 1 | In typescript, the type is defined for declaring a variable’s data type that means type declaration in typescript is for declaring names of different types such as user-defined, built-in, or any other data types. | In Typescript, the interface is defined as the syntax for the class which provides a way to define entities. This contains the declaration of the members for defining the structure which a derived class can follow. |
| 2 | It uses the “type” keyword for creating new type alias but not a new type instead of a new name for a type defined.
|
It uses the “interface” keyword for declaring an interface that can contain the methods, properties, and events to describe data shapes. |
| 3 | The typescript type supports only the data types and not the use of an object. | The typescript interface supports the use of the object. |
| 4 | Type keyword when used for declaring two different types where the variable names declared are the same then the typescript compiler will throw an error. | Interface keyword when used for declaring two interfaces with the same name has the capability to merge these two interfaces. |
| 5 | The types can be used for other types also such as primitives, unions, and tuples. | The interface cannot be used with other types of declaration as done with type in Typescript. |
| 6 | In typescript type, or type alias cannot be extended and hence the type cannot extend class as it does not support this feature. | The interfaces can be extended with type alias or the interface can be extended by type also. Where interface can easily extend classes is one of the best features of the typescript interface. |
| 7 | In Typescript, we can create an intersection type by combining multiple types into a single type and can also create a new intersection type by combining two interfaces using the “&” keyword. | In typescript, we cannot create any new intersection interface by combining different types as it does not work in typescript. |
| 8 | Types are better used when we create a function that will return an object when the function is called. Hence they are more recommended when using functions, complex types, etc. Therefore it is left to us to decide what to be used in our programs | Interfaces are most recommended for defining new objects or methods or properties of an object where it will receive a specific component. Hence interface works better when using objects and method objects. Therefore it is our choice to choose between types or interface according to the program needs. |
| 9 | In Typescript, union types can contain one or more types using the “ | ” keyword, where we can have a new union type by combining two interfaces. Similarly, it easy and very helpful concept for declaring the tuples in typescript using types. Hence we can use type aliases in computed properties using the “in” keyword”.
|
In Typescript, the interface cannot support this feature as we cannot create a union interface by combining two types. In Typescript, the interface cannot support the declaration of tuples as it can be done using types. Therefore the interfaces of typescript do not support the computed properties. |
| 10 | In Typescript, type again does not support the feature of implementation where it is only for declaring variables as they cannot implement other types. | In Typescript, the interface supports the feature of implementation where it can implement the objects or members of the class from the derived classes. |
Conclusion
In this article, we conclude that there are differences between types and interfaces in typescript. But we should note that we cannot stop using one over the other as both are almost similar but differ for some features and hence we should use them after proper analysis of what should be used. It is possible to use both together as the program can work fine. In the end, it all depends on the developer to select which to use accordingly.
Recommended Articles
This is a guide to TypeScript type vs interface. Here we discuss the TypeScript type vs interface key differences with infographics and a comparison table. You may also have a look at the following articles to learn more –
