Unions and Narrowing 28 exercises

Different Approaches for Narrowing Inputs

There are several different ways to validate the username length.

Option 1: Check for username

We could use an if statement to check if username exists. If it does, we can return username.length > 5, otherwise we can return false:

function validateUsername(username: str

Loading solution


00:00 Okay, there are a bunch of different ways you could have gotten this right, so I'm going to go through five different options here. There are probably even more that I didn't think of, but the main idea here is that we want to check if username exists,

00:13 and if username or username is a string, and if it is a string, then we basically return username.length greater than five. Now you notice that I'm not doing a typo check here, I'm just saying if username. Wow, very, very cool. And this means, though, that it's filtered out the null version.

00:32 The issue with this one, though, is that username, we don't have a test for this, but if we said validate username sort of like empty string, then it would return false. But actually, that does correspond to the way we want our function to work, because we only want usernames that are actually have length of more than five.

00:50 So this is the first way of doing it. We'd also do it by checking if type of username is a string, and if it is, then do it that way. Beautiful. Otherwise, we could also check if type of username is not a string, because if type of username is not a string, then username inside here is going to be null and we can return false,

01:09 and it understands that after this early return here, where we've returned early, this username is now always guaranteed to be string. So clever. Next, we could do this. This is really quite nasty.

01:23 This, we're relying on basically a bug in JavaScript where type of null is equal to object. And this now, type of username equals object, we're checking to see if username is null in a very roundabout way. So inside here, username is null because string is not a type of object.

01:42 And the final one here, we can even extract this check out into its own variable there and just say, is username OK? And do this check inside here. We can even do like a double bang username here, and this will still work because it converts it into a Boolean.

01:59 And this means then that you can actually combine these different checks with other ones outside of your if statements to make your code a little bit more readable. You don't have to always inline the variable there. So this is really, really nice in terms of like our options are very, very wide when it comes to narrowing.

02:18 And using if statements is a really clean way that you can make your types sort of feed into your runtime logic here. Because, of course, if we checked if this was a number instead, which we're allowed to do, then actually like is username OK is a Boolean here and username is actually typed as never.

02:36 We'll take a look at never in a bit, but it basically says that it's not what you think it is. It's not a string. So by actually having TypeScript back us up in this way, it makes our code a lot more robust.