Overloading vs Overriding in Typescript
smac89
Posted on May 13, 2022
The main difference between overloading and overriding is this: The former is concerned with the signature of a function, whereas the later is concerned with the behaviour of a method.
Override
Override is something you do to change the behaviour of a method in a subclass. When you override a method, it is expected that you intend to change the default behaviour of the method, that was inherited from the parent class. However, the method signature should remain the same in order not to violate LSP.
Overload
Overload is something you do to functions; Not to change their behaviour*, but rather to diversify their signature. A function overload keeps the same name as the function, but it's free to introduce a different signature. You've probably seen an example of this if you come from a JavaScript background and seen functions which have parameters that can be one of two or more types:
/**
* @param {string|string[]} The object to use
*/
function stringOrArray(strOrArr) {
...
}
It's difficult to tell that this is a function overload because JavaScript does not have a strong enough type system to disambiguate the overloads. However, with the Jsdoc comment, we can sort of make out that this function has an overload.
With typescript we can make this overload an actual part of our function signature, instead of living in a comment.
ex.
function stringOrArray(str: string)
function stringOrArray(arr: string[])
function stringOrArray(strOrArr: string | string[]) {
...
}
Conclusion
The implementation of the overloaded function stays the same, but the signature is allowed to be different. In the case of overriding, the implementation can be different, but the signature has to be the same, in order not to violate the Liskov Substitution Principle.
Posted on May 13, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.