TypeScript Tutorial #10 - Function Signatures

okay then gang so we've already seen how to assign a type of function to a variable so that in the future this variable could hold any type of function now we can go one step further be more specific as to what type of function this variable can hold by specifying a function signature now a function signature basically describes the general structure of a function what arguments it takes in and what type of data it returns for example a function signature like this where we just have parentheses and arrow and then void this right here basically says that the function takes no arguments because there's no arguments right here and it returns void so let me do another example I'm going to comment out this thing right here and if that will do three examples one two three and the first one is going to be greet and I'm going to say that this is going to be a function and the function signature is going to look like this first of all it's going to take in two parameters a which must be a string and B which also must be a string and finally it's going to return void so in the future oops this function or rather this a variable can hold a function which follows this signature so I could say something like this greet is equal to a function and inside that function we have a name parameter which is a string and also a greeting parameter which is also a string now inside the function all I'm going to do is console dot log these two things to the console so inside a template string so we can output variables I want to first of all output the name variable which is this thing right here and by the way template strings we use in normal JavaScript a slightly newer feature we can use those in typescript as well just gives us a way to dynamically output data or variables inside the string itself so I'll say name says greeting so this right here this follows the signature we defined right here and that's why we don't get an error we have two parameters which are both strings a Be Named and great singer by the way just because we said a and B right here it doesn't mean that these have to be called a and B it just means that we have two parameters these can be called whatever you want x and y if you prefer doesn't really matter we're just saying that they have two parameters and they both must be strings which is what we have in this case and then finally we're returning void even though we don't explicitly say right here we're returning void typescript infers that we're returning void because we don't actually return anything so this is absolutely fine but if one of these right here was a number then it's not going to match this thing right here so then we get an error so it has to match this signature exactly so let's change that to string again and let's go and do another example so this time I'll say let's calc and we're going to define the type of function oops not clock calc we're going to define the type of function this must be so again parentheses then what parameters do we want well I'll say a must be a number B must be in number and C must be a string and then finally I also want to return a number from this function okay so it takes three parameters number number string and it returns a number at the end so now let's create this function calc is equal to a function and the first parameter is going to be number one and that has to be a number the second one is normal to that also has to be a number and the third one is going to be called action and that is a string now inside here we want to ultimately return a number but before we do that I'm going to say if and I'm going to check if action that we pass in is equal to add then what we're going to do is add the two numbers together and return that was so return num1 plus num2 so we are returning a number right here but we still get an error and that's because if action is not equal to add right here then we're not actually returning anything and it must always return a number so we need to attack on an else clause right here and say return norm one - none sir we'll say it could be any number and doing a - instead of addition so now the error go is because even if this is not add right here then we're still returning a number right here and again we could be explicit if we want by same number over here we don't have to because when we return something typescript infers that return type so this works but if we changed one of these to something like I don't know a string and this to a boolean then obviously these things are not going to work we get errors because now we're not matching the signature of this function type okay so let me change those back this must be number and I think this must be number as well yep okay cool so let's do one more example I'm gonna say let's log details and that is going to be a function whereby we have some kind of parameter I'm going to call it object in this case or object but you can call it what you want it doesn't matter that parameter must be equal to an object where we have a name property which is a string and also an aid property which is a number now this must also return void okay so let's try this out I'm going to say log details and set that equal to a function and I'm gonna say the parameter name is ninja because again remember it doesn't have to match we're just saying there must be one parameter here okay and this must be an object with a name and an age which both have string and number types so let me say now inside here we must have a name which is a string and also we must have an age which is a number like so and then this is going to return void so all I'll do is console dot log and will log out the ninja name inside a string template again and we'll first log out the ninja dot name and then we'll say is and then we'll log out the ninja dots age will say years old okay so this works because now we're taking in one parameter which is this kind of object it has a name property which is of type string and an age of type number we're not returning anything so therefore it returns void if this was something else though then it wouldn't work it wouldn't let us do that okay so we've seen how to use type aliases and we could do that right here we could say something like type ninja or even type person is equal to an object where we have a name which is a string and also an age which is a number and then what we could do down here is just say ninja is of type person like so and this is still valid even though we're not explicitly typing this out here it still matches this signature right here so if you wish you can get as specific as you like with these function types and signatures

Channel: Net Ninja

Views: 110,185

Keywords: typescript, typescript tutorial, typescript vs javascript, ts, ts vs js, typescript for beginners, tutorial, tutorial for beginners, typescript tutorial for beginners, what is typescript, typescript basics, install typescript

Id: TZNbzyY6hMU

Length: 7min 45sec (465 seconds)

Published: Mon May 18 2020