00:00 Alright. Let's jump into it. Let's make our type first. So it's gonna be type user profile. That's gonna have a name that's a string, an email that's a string, and both of those are required.

00:09 But bio and website, these are optional. And so now we can specifically type Alice and Bob with those, with the that type and that can protect us against, making these silly mistakes here and there. And I should mention also that often I don't find myself explicitly typing things because usually, I'm gonna be passing this object to some, function that has a type definition, and we'll look at that when we get into the type safety stuff. But, and then I'll I'll catch the problem at that point. And so, while you'll be seeing me doing this a lot, in our exercises and things because the way things are structured, once you get into, real, TypeScript code bases, you'll find that TypeScript is actually really good at inferring what you're trying to accomplish.

00:59 So I do definitely do this occasionally, but not as much as you might, assume based on what we're seeing in here. Alright. With that said, let's, talk about how we access these optional properties. So if I were to just say console dot log alice.bio dot to upper case, well, it auto completed for me. So let's get rid of that.

01:22 Right here, we're going to have a possibly undefined error, and that is because Alice is typed as a user profile, which has an optional bio. And we if we were to switch over to Bob, we'd get the same problem because Bob also is a user profile and maybe does, maybe doesn't have a bio. Now, this is actually one of the reasons why I prefer to not have, this explicitly typed because you'll see that now TypeScript knows, oh, Bob has a bio. I can see Bob has a bio right there. That's like the way that Bob is structured.

01:53 So it is properly inferring the types for both of these. But if we wanted to explicitly type these as user profiles, maybe these objects came as a function, parameter and so we don't really get to choose whether they have the bio or not. How would we access this in a safe way? And the way that you do that is with what is called the Elvis operator and I'm pretty sure that comes from his hair and the way that the question mark looks right there. You know how Elvis has curly hair.

02:20 I don't know. Yeah. The Elvis operator. But, yeah. So what this, allow us it's the nullish coalescing operator.

02:29 What this allows us or sorry. The optional chaining operator. Nullish coalescing is something else. We'll learn about that later. But, optional chaining operator is, effectively a way to say, hey.

02:42 If bob. Bio exists, then call the to upper case on it. And if not, then what? Well, let's see. We've got software developer and typescript enthusiast, all two upper case.

02:52 If we switch to Alice, then we're gonna get undefined. So that's basically what this is doing is it's saying, if this exists, then do that, and that's the value of my expression. If it doesn't then undefined. That's what's going on here. Don't don't call it.

03:08 Don't whatever. And you can even do this with, functions like if a function exists or doesn't exist. So if it doesn't exist, then just undefined. If it does, then call it. I know that kinda looks funny, but that's that's what it looks like.

03:22 It does look like a property access, just with the Elvis operator, the optional chaining. So very useful feature, right here. So we can use optional check, chaining or we can do a check if the user here. Actually, let's do, oh, you know what? I I skipped over the create a function part.

03:41 Hold on. Let's make a function. That will make some of this a little bit more, useful here too, where the user, we accept a user profile, and then we get the name, the user, and the bio. Now here's something interesting. Here's the nullish coalescing thing I was talking about, which shows up right here in our version of the function.

04:00 So do do do do do do. There we go. Excuse me. And, yeah, our AI agent wants to take the name and email and bio because that's all that we're using, which we can do it that way too. But in any case, we we know that the name is there.

04:16 We know that the email is there and that's all good. Now, we just need to concern ourselves with, do we have a bio? And we can either do the knowledge coalescing or we could do this, user dot bio dot to upper case, and be fine and be fine with this no, optional chaining operator. Or, we could say if the user has a bio, then we can log their bio. And TypeScript is smart enough to know that if we made it into this if statement, then the user bio is definitely a string and, we can two uppercase it.

04:50 And so we don't need to do the optional chaining or the nullish coalescing because by this point we know that it's a string. Now the tricky thing here is if you remember from our lessons about null truthy and falsy, you'll remember that a user with a bio that is empty, in this case is not going to get this logged. Even though they actually do have a bio, because the bio is an empty string, it's treated as falsy and so we won't end up in here. And so, yeah, a couple ways to solve for this. We could say if it's not undefined, or, we could say if it has a length that's greater than zero, so, it's a string with more than one character, then it will fall into here and we end up with the right thing.

05:33 So here, let's do display user info for Alice and Bob. And here now, we're gonna see Alice email and then Bob and Bob's email and Bob's bio. Whereas, if we just went, with this or actually, here, let's go up, with, not equal to undefined. There we go. Then we're gonna get bio as an empty string for Alice, which, may be what you want, maybe is not.

06:03 It's just good to understand how to do this. Okay. Great. So that is that. We we could also Earlier, we had this as user profile, so we could do it that way.

06:15 Here's the other interesting thing about this, and this kinda goes back to what I was saying about this earlier where I don't typically do this. You can actually remove this now. And if you do have a mistake, we could do do whatever, then this actually is gonna pass because, Alice may not be a proper user profile. Like, if we were to throw a user profile back on here, Alice is gonna be like, woah, woah, woah, woah. But, Alice satisfies the properties that are required by a user profile when passing it to a function.

06:47 So it may have more properties than it needs to, but that's fine. The function's gonna operate okay. So this is one of the reason why I kinda like not having to type it explicitly is because then I can have extra properties if I want. But, yeah. The other thing is, if it, if Alice doesn't have all the properties that I need or it has different properties, then I am still going to get a type error.

07:09 And so I kinda get the benefits of both. I don't have to explicitly type it and I still get warnings when there's a problem and I can add extra properties if I don't want to. So I recommend that you play around with this a lot and just see what that experience is like. And the more and more you play with this, the more familiar you become. And I think that's a good thing.

07:27 So that is all. Let's Just as a quick review, the the primary thing that we were focused on in this exercise step was about accessing like optional properties. So here's how you type that. That property may or may not be defined. So you don't have to define it here.

07:46 And then to access it, you want to either check whether that property exists before you do anything with it or, you can do the, optional chaining. And then we also saw a little preview of the knowledge coalescing thing. But, yeah, optional chaining is good enough for here. K. Good job on that one.