#15 - Function Overloading in Typescript

hey guys this is Naia welcome back to na automation labs and back to our typescript Series today we are going to talk about that function overloading in typescript is it really possible or not although we have seen in JavaScript also that JavaScript does not support function overloading but in typescript we can do that so what is function overloading function overloading means multiple methods having the same name you can say you can have multiple functions or methods having the same name but different parameter types and the return type however the number of parameters should be the same for example let's see if these two methods that I have created display display both are having the same name but number of parameters are exactly same so this is again giving you error duplicate function implementation because it's a clear case of duplicate methods but again if you say just like we do it in other languages like Java or cop I'm creating let's see one more variable aable which is uh a string type is it method overloading or function overloading no here also this is giving you the error that duplicate function implementation not allowed here right but here I have written with the same name with different parameter types okay I have two parameters A and B and this is totally number type this these are two string type and this is let's see void and if I'm writing let's return a number from here but again this is giving me the duplicate error here like this or you whatever let's see any return type if you write it this is still a duplicate so how to achieve the function overloading in typescript so what exactly I'm going to do that let me delete this first of all that you have to provide the implementation implementation of the function that is what you have to provide it so for example I'm writing that I want to overload one function let's see one some function that I really want to overload and this sum function I'm taking uh let's see two parameters you give me one a string and then B uh string also so let's say I really want to sum or add whatever the function name that you want to write it and the return type also I'm saying it should be a string type and that's it so this is called the function implementation without any body we have written although it's giving me the error that function implementation is missing so that is what you have to implement also but this is without implementation no method body no business logic and let's say I'm going to do again writing this thing with the same function name but this time I'm saying the parameter types will be different number and let's see number and then it should return a a number from here like that so what is the definition with the same name same name add and add function different parameters type so both parameters are having a string a string here but here both parameters are having number and number so yes has different types and different return return type also a string and the number right okay and the number of parameters should be same yes we have two parameters here also we have two parameters now we have to implement so need to implement this so how many times we have to implement we need to implement uh this only and only once okay so now I'm going to implement it so see I'm just creating a function once again add and it's taking two parameters a or whatever the variable name parameter name that you want to write and then what will be the type it can be string also it can be number also so what I can I can do I can write a any type of data and then I'm saying B again any type of data you can supply it for the B also and the return also could be any type of data here and then I'm simple writing that uh return let's see add these two values A and B values that is what you have to add so this is the example of function overloading in typescript so first you define the structure that what kind of function overloading that you really want do so let's see simple I'm just defining and providing all the Implement I mean provide the implementation of the function means that implementation mean just a prototype of the function or you can say implementation or prototype of the function and here actually Implement with this only once Implement with the method or you can say the function body that is what you have to give it here okay so this is uh without method body and this is with method body here so let's see I have written now I can say that you can give me string number you can give me uh some other thing also let's see you can give me Boolean also and this is Also let's say I'm writing a Boolean here and then return a Boolean something like this and whatever the values that you are giving now it could be a could be anything B could be anything return also could be anything here and then I want to call this function how to call it see I'm calling it so now I'm passing that let's see hello and then world right and let's see I'm storing it some variable let's see S1 variable and then again I'm writing let S2 variable again I'm calling this particular function 10 comma 20 is will this work see it is accepting 10 and 20 also why because the implementation we have given here like that that a could be a number also okay and then again I'm writing it let's see S3 if I'm calling add and I'm passing true something and then uh false here all the true and false uh you can add it fine that's it does not make any sense but here if you see that it will give me what here it will return hello world it will return 30 and it will return true plus false let's see what will happen with the true plus false but I'll do one thing I'm just printing S1 and then once again I'm printing S2 and then I'm printing S three here as well okay so let's run it and let's see what happens so I'm just going to compile it and uh with the node I'm just going to run it so let's uh do JS and now you can say yeah 0 + 1 which is one for true and false 30 for this one and hello world will give you hello world here right so this will give you one here okay so I hope this is clear that function overloading provides the concept yes I typt provides the concept of function overloading and make sure that with the same name add add add different parameters type okay a b both are a string type number type Boolean type and the return return type also different and the number of parameters should be same this is mandatory in other languages like Java or something the number of parameters should be different all right because when you let's see one test method one parameter two parameter three parameters number of parameters are different but here number of parameters should be same right so for example let's see if I uh try to overload this math me once again here and then I'm writing only one parameter here which is a kind of a number okay and see this is giving me the error here this is says that okay fine the overload signature is not compatible with this implementation signature because in the implementation you have over loaded only with two parameters so that's what it is not compatible so if you try to let's see make it compatible with one parameter also which is taking only number or let let see which is taking only a then again it will give you start giving you and let's see simple giving me uh a and then let's return a only so see again it's giving me the duplicate function implementation so this is of course it will start giving you the error like duplicate methods or duplicate functions so that's what the last point is very important the number of parameters should be same if number of parameters are not same then you have to implement it then you try to implement it will start giving you the duplicate error so better in the function overloading we should always give the same number of parameters so let me remove this from here and remove it from here okay slightly different from other languages but uh yeah this is a way in the typescript it is defined so yes in JavaScript we cannot overload a function but in um typescript we can do that with this signature I hope this is clear thank you so much

Channel: Naveen AutomationLabs

Views: 1,814

Keywords: Function Overloading in Typescript, function overloading, method overloading, typescript tutorials, typescript for sdet, typescript playwright, typescript webdriverIO, typescript, naveen automation labs, function overloading in typescript, typescript function overloading

Id: lZhC7FwQk8g

Length: 9min 2sec (542 seconds)

Published: Wed Nov 08 2023