Matt Pocock’s Post

Transcript

Let's talk about switch true narrowing in TypeScript 5.3. They've improved the way that switch true narrows. Let's take a look at an example here. My funk takes an input of unknown which could be anything inside a function. We're going to say if type of input is string or number then we return it. Let's add an else if to check if it's an object and if it is let's return that. We've got two branches here. The 1st is. If it's a string or number then return, otherwise if it's an object then we're going to return. That this works because we're checking if input is an object and we're checking that it's not null. You've probably written code like this many times throughout your career, but did you know you can use a switch true to structure it differently? Inside a switch true you can say if type of input is string or if type of input is number then return it. We can add another case here to do our object checks too and we get the same behavior. If we have input string or number we return it and if we get input is object then we return it to. Compare this syntax with the if statement. You'll see that they're very similar. Our type of checks basically stay on the same line as we switch between them, and so you can use the switch true as an alternative to this if statement. So the switch true has been a very common pattern in TypeScript, but until TypeScript 5.3 TypeScript didn't know how to interpret it. In both of these return statements it wouldn't narrow it down to its actual object or string or number, so you would end up just having a function which took in unknown and returned unknown. But now, thanks to the efforts of my old colleague Matthias, it now just works in TypeScript and so switch true just got a whole lot more attractive to use.