TypeScript Tutorial #8 - Function Basics

Key Takeaways

all right the gang so in this video I'd like to talk about the function type in typescript so first of all let's create a function and store it inside a variable which I'm going to call greet and this is going to be an error function and all we'll do is log to the console hello world okay so a simple function now type script will automatically infer that the type of this variable now is going to be a function much like in third strings or billions or other types before when we defined those and now in the future if I try to say that greet was equal to another type like a string for example then it's going to give me an error and it's going to say that I can't do that because we already have declared that this is going to be of type function okay so we can't do that now instead of defining a value for a specific variable which will be a function we don't have to do that we can explicitly say that this will be a function in the future much like we did with other types by saying greet : and then function with a capital F and notice this time the function the type is with a capital unlike string unlike boolean or anything else where we didn't use capitals so function it does use a capital now we still can't do this because we're saying that greet should be a function book what we can do is later on set greet equal to some kind of function so I can say greet is equal to an error function and inside here I'm just gonna say console dot log and we'll say hello again and this is allowed it lets us do this because we've said greet is a function okay so we've already seen as well how we can pass in parameters or arguments into a function and say what types those should be but let's just go through that again I'm going to come down here and create a constant and call it art and set that equal to a new function and I'm going to pass in a few parameters into this function so a which will be of type number we've seen this before this is how we specify the type of the parameters which must be passed in and B is also going to be a number and then down here we'll just console dot log a plus B so if I try to call this function I'd say add and then passing two numbers like five and ten okay so if I save it we should see that in the console right 15 which is 5 plus 10 but I can't pass through 10 hours say a string because it must be a number so what if I want to pass in maybe an optional parameter because at the minute if I don't pass in one of the parameters I get an error maybe I want one of the parameters to be optional maybe a third parameter well I can do that I can say C and then I'm going to say that this must be a number or a string remember this is a union type so we're saying this parameter must be either a number or a string now if I want this to be optional all I have to do is place a question mark in front of it and notice when I do that the error down here goes away so put a question mark now it's optional and now it goes away even though I don't pass it through as a third argument so when we don't pass it through the value of this becomes undefined and I can demo that by saying console dot log and output C and if I save it we should see undefined over here okay so that's an optional parameter likewise a bit like optional parameters we can also say that this will have a default value if we don't pass a number through so I could say that this default value is going to be equal to 10 okay now at this point when we use a default value we don't need this optional parameter because we're saying okay well it's still going to be optional but the default parameter is going to be 10 if they don't pass something in so we don't tend to use the question mark and the default parameter together just one or the other so now instead of being undefined if we don't pass through a third argument for C it will now refer to this default value which is 10 and if I save and check this out in a browser we see 10 is logged down here but if I pass in a third parameter 20 then I see that one instead you know rides a default value and this could be a string 20 if you wanted it to be because we said that this is a union type number or string and that works as well okay so that's the basics of parameters inside functions and by the way if you use an optional parameter or default parameter you should always generally put these at the end of the parameters so always do your required parameters first because they have to be passed in and the optional parameters at the end otherwise these arguments are going to get mixed up all right okay so when we create a function we sometimes also return a value right so let me create another function I'm going to say Const - is equal to a function where we take in two parameters a is a number and also B is going to be a number as well and inside here we're just going to return a plus B that's all we're doing now if I then come down here and say let results equal to - and then passing two numbers like ten and seven what will happen is that this right here will become the type of the return value right here so when a function returns something like this typescript can infer the type that is returned and therefore if we hover over this we can see that results is a number because it's inferred the return type of this function it's giving it a value and it knows that this will be a number so now if we try to say that results later on was equal to something else like a string we can't do that because we can't change the type it automatically inferred the return type and set that type to this where we set it equal to that function okay now we can also if you want to explicitly declare the type or return type rather of a function up here and we do that after the function parentheses right here by adding a colon and then the return type number now we don't need to do that because typescript is autumn Atika inferring the return type so we don't need to do it but I have seen it in some cases and I sometimes use it as well explicitly just to show to other developers if we have a bigger function that look this function is going to return a number right so we can see that at a glance now what if we don't return something like this function or right here because this just looked something through the console well it still technically returns a value and it returns a value called void and if we hover over this we can see this void keyword if you look to the right of this thing that's popped up on the screen over here it says it returns void at the end so that would be like would seem explicitly right here void so a function in typescript returns this void value when we don't actually return something and it basically represents a complete lack of return value now when this is compiled into JavaScript that will become undefined but in typescript void is completely separate to undefined undefined would be like before when we had an optional parameter over here and if we didn't pass something through it would become undefined write void is a complete lack of any kind of value now that probably sounds a bit foggy but don't get bogged down too much with that now we'll probably see more examples of using void and undefined in future lessons but now hopefully you have a better understanding of how function types work in typescript