Stop Using TypeScript Interfaces
Why You Should Use Types Instead
Join our Vibrant Discord Community for exclusive information and insightful discussions
Types and Interfaces are profound features used inside every TypeScript program.
However, since types and interfaces are quite similar in function, it begs the question: Which is better?
Today, we will evaluate types and interfaces, then reach a conclusion as to why you should use types over interfaces in most scenarios.
So without further ado… Lets dive right in.
So What Are The Differences?
Lets analyze this Person
type and interface definition:
It is clear types and interfaces have similar syntax, with the key difference being that the type uses =
to define the shape of an object unlike the interface.
However, there is much more to it than this.
Lets dig deeper to explore and evaluate types and interfaces together.
Extensibility
In terms of extensibility, many argue interfaces are obvious winners since interfaces may extend other interfaces using extends
.
Here the Person
interface extends
Job
, and as a result the properties of the Job
interface merge into Person
.
On the other hand, types also offer extensibility by leveraging the union |
or intersection &
operators to merge existing types.
Interfaces cannot express this behavior directly.
Implementation
Interfaces in TypeScript are compatible with Object Oriented Programming (OOP) like in other languages, e.g. Java or C#.
This means interfaces can be implemented in classes using implements
.
Lets now define Person
as a class
, and implement a new interface called Work
and satisfy the contract between them.
Therefore if you use OOP frequently, interfaces will be more applicable than types, as types cannot be directly implemented by classes.
Performance
When it comes to performance, we are talking about the performance of “type-checking” done by the TypeScript compiler, which decreases exponentially as your codebase increases in size.
This is why we benchmark which of types or interfaces are superior in terms of type-checking performance.
Here is a video where Matt Pocock explains the differences between types and interfaces, and why there is actually ZERO difference in type-checking performance between types and interfaces.
Types vs Interfaces: 0 Performance Difference
Why Interfaces Could be Harmful
Interfaces in TypeScript have a unique feature called Declaration Merging.
Declaration merging is when the TypeScript compiler merges two or more interfaces with identical names into one.
On the one hand, this feature allows for convenient refinement and extension of existing interfaces without changing other dependencies.
On the other hand, declaration merging can have detrimental and surprising effects on your codebase for these two main reasons:
- Order of Precedence: Later declarations always take precedence of prior ones. If not careful, this could lead to unexpected issues when declaration merging occurs in many parts of your program.
- Unsafe Merging with Classes: Since the TypeScript compiler doesn’t check for property initialization, this could lead to unexpected runtime errors.
Types do not have this problem, and hence are more straightforward and safe to use as a result.
Conclusion
Unless specific interface behaviour is necessary, e.g. extensible refinement or implementation using OOP, your best bet is to stick with types.
Types are flexible, straightforward, and avoid pitfalls associated with declaration merging.
Types are also identical in performance compared to interfaces, providing you another reason to select types over interfaces in your codebase.
If you enjoyed this article, please make sure to Subscribe, Clap, Comment and Connect with me today! 🌐