Do you really know functions in typescript

hey there everyone headaches here back again with another video and welcome to the typescript series I'm pretty sure that you have already heard about the functions either in JavaScript or typescript but I'm pretty sure that a lot of you don't know what should be the mindset behind using the functions in the typescript there are a couple of ways that should always be running in your mind and don't worry we will not be dragging this topic around for a thousand videos there will be just two videos this one and the next one and we'll be covering end-to-end functions in that so after watching these two videos you'll be all comfortable with handling any types of functions in typescript so let's get started I've created a new file up here which is saying simple console log and let's go ahead and try to create a function we'll be creating basically three or four functions which will give you eventually the whole idea and the picture and scenario which you should be worried about first of all it's really clear that first function that I want the goal behind it is I want to add a two value to it so obviously I should be taking input as a simple number and let's go ahead and try this out so let's just say if I go ahead and say hey I want to add a 2 so I'll be taking input as number and that's pretty much it and at the time of returning it I'm going to go ahead and say hey whatever the number you are taking just go ahead and add two to S pretty simple nothing wrong in that now if I go ahead and work on with that if I go ahead and try to add to this I can go ahead and say hey I want to add 2 to the value 5. nothing wrong in it absolutely they say but here comes the problem the problem in the typescript the problem which comes up in the typescript and by the way please excuse my system it has been heavily loaded for the live classes and a whole lot of other things so it might run a little bit slow so we have to wait a little bit to see the errors now notice here the first important thing is in this add to function if I hover this we see any and any is a problem in typescript whenever there is an inference of what should be the data type it is usually good in the case of variables but in the case of functions not so good so in this case notice here the function add to accept a number which is any which which is problematic the reason why it is problematic is because I can simply go ahead and come to here number and can I simply go ahead and assign values like to uppercase which I shouldn't be allowed to do and right now I'm allowed to do so and even if I run this file because my system is a little bit slow today so if I go ahead and run this one I'm allowed to do so although this is creating a problem that hey this is a duplicate function so obviously this is the error we will talk about later on right now let's go ahead and Export this save this and there we go so I can run this code again and this produces a fine JavaScript no problem at all but I shouldn't be allowed to do this because if I just go ahead and convert this 2 into an uppercase that becomes a string not a good idea so that is one problem that I'm facing another problem that I'm facing is if I go ahead and convert this five like this it still works shouldn't be working there the whole idea of the typescript is to have a stricter type so that we make less mistake and the fellow coder who are working with us makes less mistake so in this case let's go ahead and work on and try to fix that now the fix is really easy I can go ahead up here and can say that hey whatever the value you are going for make sure that the value that comes to you is always going to be the number now automatically typescript is giving me a problem that hey hey whatever you're trying to do this is not good this is this is not allowed so please don't do this always pass on a number to us so now this kind of a 5 in the strings is not allowed and go ahead and stop that now since you have written the function definition with the number being accepted like that I cannot do Mischief things like I can go I cannot go ahead and say Hey you cannot go ahead and say hey to uppercase and go like this no no you are not allowed to do whoever is the creator of this function or designer of the function in your entire group has said that this function needs to take input as a number so that is why we're 100 sure that we when we add two to is it is possible in operation we don't need to do extra check we don't need to run the conditional that hey if the number is uh number then go ahead and do it otherwise return an error message that hey please pass on the number no you're not not supposed to do all of that so this is all good okay this is the basics of it let's try to wrap this up with one more type of the things so another thing another function that I want to have is a really a simple method in which I want to just have some string so let's go ahead and have this one so let's just say you are you were not aware about the two uppercase methods so you want to just go ahead and say I want to have a function which says get upper so what it does is convert any string into uppercase values similar to that you go ahead and say hey give me a value I go up here and say Hey I want to return whatever the value you get I'm going to go ahead and put a two uppercase onto this one to uppercase now again I got no suggestion first of all that is bad probably my compiler is slow that could be an acceptable case but here in this case since this value if I go ahead and look onto this one this is any any is again wrong and if I go ahead and say hey let's just say get upper I go up here and say hey this upper is going to get a value something like this obviously this is problematic here right now squiggly lines are there it is telling me hey dude you're doing wrong you need to pass on one compulsory argument so I can go ahead and pass on four it's happy and you know why it is Happy it shouldn't be happy it should be mad at us because the value should always be strings so in this case the type annotation is really really strong I told you in the earlier videos in the case of variables it's optional it infers the type pretty nicely so there is no problem in the case of function it is really compulsory let's go ahead and move on and now it gives me a problem that hey dude whatever you're doing with four nope you shouldn't be doing that in case you want to convert this in uppercase either pass me on 4 like this that is acceptable that is doable or just pass on like this that is also doable that is how you are using I'll convert that okay moving on quickly and fastly don't want to drag down the tutorial okay let's just say I create another function which is going to be simply a sign up so I'm going to go ahead and say sign up user so let's just sign up the user now for this one particular one I'll just define the definition like this and I want to have couple of more parameters in this case at the time of sign up of the user let's just say I'm going to ask him for a name and I'm going to go ahead and ask him for email and I'm going to ask him for password pretty common thing you have seen this thousand time now while this is particularly bad in this case because I can simply go ahead and say hey I'm going to go ahead and as have a user sign up if I go ahead and go like this obviously it complains that hey there are squiggly lines so that means you have to pass on but all of them these are marked again as any although there are three parameters this time but they are being marked as any so I can go ahead and say hey one two three you should be all happy because it's any and that defeats the purpose of having a typescript so in these cases also individually and this is the syntax how you do it this one is a string and this one is also going to be a string and since everybody is a string let's change this one so this is going to be is paid so just to have a flavor of it this is going to be a Boolean so in this case we are going to go ahead and have a Boolean value pretty simple pretty easy so this is now right now in our function body there is nothing in it but you get the idea you have watched the JavaScript the code part and everything you can write that this is a series more about focusing on the typescript so now we see this quickly line complaint but other guys are not complaining and this is the one thing I absolutely like about the typescript so fix one error at the time this is updated in the recent version of it so I go ahead and say Hey you need name I'm going to go ahead and give you a name uh probably my name then it says hey this is also incorrect it as argument is number but it should be a string so let me go ahead and change this one so let me go ahead and say hitesh at lco.dev and this one also needs to be a Boolean so is it a paid user nope it is a freebie so there we go now it is all good and okay now one more thing that I want to cover in this video quickly is another method and then I'll tell you about the problem so let's go ahead and actually use different kind of function this time and arrow function so let's just say we're going to have a simply let and this time login user and we can just go ahead and use the arrow function the definition remains same so I won't be writing anything inside the curly braces but the value which we are worried about is how to take the input let's just try to have simply email and is paid let's just say these are the things so I'm going to go ahead and worry about email probably a name Also let's just say name email and again is paid we are using same parameters now this is good this is good there is no problem here but let's just say I only want to pass on two values obviously these kinds of cases will come up here so in the name I can go ahead and say hey this is going to be a string the email is going to be a simple string and the paid is going to be a simple Boolean but one syntax that might confuse you how can I pass on default values let's just say in the case of login user I want to use this and I want to Simply pass on just two things maybe name and email so name is going to be h and the email is going to be H at the rate hedge.com I wish I got that domain uh but I don't want to pass on other values now when I save this one notice here login user it is not giving me any complaints as of now uh let me go ahead and try to run this one and there we go I told you my system is a little slow today but just giving the idea that yes this is paid is a compulsory thing it needs to be there and one way you can have an avoidance of this one is simply by providing a default value the syntax goes first you annotate it colon and then the data type and then you simply go ahead and say hey this is going to be false by default and now the system is happy not because it is slow it is truly happy I can go ahead and run the code and I can see that hey this was all okay and this is the brief overview of it and yes it generates the equivalent of the same exact almost same code but notice here uh some code was generated a little bit more in the login user this is the most important part where we should be focusing a little bit now obviously this is generating a suvar as a keyword we can update the TS config and learn about that later on please ignore that as a moment and right now we can see that there is a name email and is paid and we are looking for a conditional check if is paid is void then it is 0 otherwise false you get the idea typescript help us to write a little bit of a cleaner code as a stricter code in that case so this is all about it but one thing still is remaining which is hey if you look at this example closely add 2 is a number that is great and fine and maybe we're holding that value and further doing an operation so for example let my value that is going to be holding by add to and I'm expecting that the value is going to be added to 2 so 7 value but what instead of this I go ahead and return not just like that so let me just comment this out and I go ahead and return a simple something like hello nobody is stopping me doing that so we need to learn that okay this is completely stored and completely fine and yes my system is not slow this actually is allowed right now so we need to worry about one more thing about the functions which is how can I return more accurate value and that's going to be coming up into the part two of the typescript function go ahead hit that subscribe button I'll catch you up in a the next video

Channel: Hitesh Choudhary

Views: 16,486

Keywords: javascript, typescript, reactjs, devops, machine learning

Id: ULMH3lxygXY

Length: 11min 30sec (690 seconds)

Published: Sun Sep 11 2022