Next I want to explore a function overloads a feature that allows us to define multiple functions signatures
so to save for one at the same function which simply means we can have multiple possible ways of calling
a function with different parameters for example to then do something inside of that function.
And a good example where function overloads can help us can be seen a little bit further above this
add function we wrote earlier what it does is it takes two combined table values which means strings
or numbers and then as you can see the return type typescript infers here all these combining all and
this simply means typescript understands that what it returns although either is a string or a number
but actually if you think about it that's not really true.
I mean technically it's true but we know that if we pass in two numbers the return type will always
be number.
If we pass in at least one string to return type will be string.
Now why might this matter.
Keep in mind that the add function is written like this and actually we can comment out everything below
and add some new code up there right below to function.
If I now get my result here by calling at an impasse and 1 and 5 you'll see results of type combining
all a consequence of this is that typescript does not know whether result is a number or a string.
Now this might really matter if we are passing in strings if I pass in Max Schwartz here then this works
but I still get back combined bill now as a consequence I can't call string functions on result I can't
call split for example to split on the whitespace I know that this will work because I know that when
I called a function like this I will make it into this if branch and I will get back a string so I know
that result will hold a string but typescript just knows that it holds a string or a number.
Now of course we can use typecasting here and tell typescript that what we get back is a string we can
do that with the typecasting syntax you learned about earlier.
Still it's not optimal that we have to do that.
I would argue because we have to write more code here even though we would expect typescript to understand
that when we call this function like this we always get back a string but typescript isn't really analyzing
our code good enough here and that's where a function overload can help us function overload is written
by simply writing function right above your main function so to say with the same name so you repeat
this line you're basically however without the curly braces no opening and closing curly braces thereafter
and now you're you want to use specific types.
No and No.
And then to find a return type for when this is the case when you get at least one number in there we
could say then the return type is number.
So now is that we're saying to typescript if we call this function and both arguments are a number then
this function returns a number.
Now this of course is not certain texts that would work in JavaScript it will be eliminated by typescript
indie compilation process but typescript merges this function information and this function declaration
here to gather and basically combines the knowledge of these two lines here and now it knows OK we can
call this function here ever with a and b of type combining able or with a and b of type No.
By the way you also can add more or less parameters here in your overloads.
You're really flexible there.
We could also add function add here and just expect one number and return a number and this would also
work if we make B optional in our other overloads as well because ultimately of course you need to ensure
that your code in here always works and you receive all the arguments you need in the end.
So if B would be optional here then you'd see this works.
Now of course we just would have to work around B being potentially optional down there.
I don't need that however so I'll get rid of that and just leave this but I also do not want an overload
for when we call this with strings so I will add another add function overload here where a is a string
and B is a string and then I'm pretty clear regarding the fact that what we return will be a string
by the way it is a good practice to add a semicolon after these overload lines here so now is dead I'm
saying if we're calling this function with two numbers we always get back a number.
If we call it with two strings we always get back a string.
If we call it with one string and one number we technically also always get back a string.
But I don't want to add all these possible combinations here of course I could add more and that also
add number here or the average combination we might have which is this one.
Well I guess now I did add all combinations and I'm listing all potential combinations of values here.
And what we return in each case now with that you see the error down there is gone because now typescript
knows that result will be of type String.
If we call add with these two values which are both strings and if I hover over add you see there are
three additional overloads away lable here I'm calling add with two strings but typescript knows there
are three other ways of calling this for example with a string and a number in which case I get back
a string with a number and some string or with two numbers this would all the work.
Then of course I can call split because types correctly identifies that when I called us with two numbers
I get back a number and on the number you can call split so these are function overloads and that can
help you in situations like this here where typescript would not be able to correctly inferred a return
type on its own.
Here you can be really clear about what's getting returned for two different combinations you might
support in your function.