Explore TypeScript by Writing Functions

Instructor: [00:00] When starting with TypeScript, I recommend starting with functions. Keeping this problems tab open or just hovering over any red squiggly lines, if you don't see the hover enabled, which I always turn off in videos, just search for hover in your settings. Command, comma, and search for hover. Make sure this one was checked that hover enable is checked.

[00:26] Your functions. I'm going to type a function called greet and return a string that says, "Hello, John." You're going to want to write your functions with input and output. I'm going to extract hello to be a greeting.

[00:43] We'll see our first red squiggly, which says this is implicitly any. Which isn't necessarily a bad thing, but it's a strict feature of TypeScript, that if you want it to be any type, then you want to do the colon any, so you can pass in any number or string or whatever. We do want this to be a string, because it's going to go inside of a string.

[01:07] You can also check whenever this light bulb pops up. That means VS Code is suggesting fixes. If you click on that or hit command period, it will recommend some fixes. You can say just remove greeting, which is not what we want, but it's good to know it's in there as a suggestion.

[01:25] I put that back and type it as a string and place it inside of my return statement. Then try using your function. We'll say greet. Right away, you'll see it requires one argument, but got zero. You either pass in the argument. We can just say hello. Or you could make greeting optional by adding a question mark right after greeting.

[01:49] That makes this optional. No more warnings, but that's obviously not what we want, because we do want something returning there. We'll pass in hello again.

[01:59] Then you can try creating a message from this, something like a message which we know will be a string. TypeScript is inferring, because we're returning this string that the return type here is string.

[02:14] You don't need to type that out. If you were to try to return something like a number, you'd see we get an error there, because greet is inferring that to be a number and not a string.

[02:26] You could add string in there, say we want to return a string and the error shifts from down here to up here. Because before we said message can't be assigned to a number, but now we know that one is not an acceptable return of a string.

[02:47] We'll put our string back and keep trying to extract things. We'll extract the name now. This will be a string here. We'll put our name in and you'll see another error pop up down here. Name was not provided. I'll pass in John.

[03:06] Keep on trying more and more things and let the errors pop up and find ways to solve them. If you stumble into the scenario of, "Well, I don't want to pass in John. I want that to be a default," you can just figure out how to solve that.

[03:18] Now, you don't need to pass in a name, because there's a default provided. Or another common scenario in a function is to pass in an object with some options in there where this is the message and this is the name.

[03:34] Now we have to figure out, "Well, how am I going to pass this in to here?" What you essentially do is wrap what you currently have in curlies and you can just say options, and you have options is this type. I can say options.greeting and options.name.

[03:54] Or you could even destructure options. We destructure the greeting off of it, destructure the name off of it, and go back to where we were before. It looks like I accidentally wrote message there, so you can fix that as well. Again, you'll see all these errors popping up. Just figure out how to work through each one.

[04:17] Lastly, once you've worked through the errors starting from nothing and building some functions up, find ways to extract these types. This is a type. I'm going to cut that out and create a type of salutation. That can just equal that. Now, we have a salutation which we can use as a type that comes into our greet.

[04:42] While we have a very, very basic function which really isn't doing very much other than returning a string, you've explored all the features and worked through all the errors just by trying different arguments. Trying it as an object, trying them as optional, extracting types, and just seeing how everything fits together.