How Did I Not Know This TypeScript Trick Earlier??!

hey in this video I want to show you a really useful typescript trick I discovered it like only a week ago in an open source repository and it's so good it's so useful and so simple you just feel kinda silly not knowing it let's take a look at an example so here's the use case right we have a parent component and the only thing we're doing is returning a child component from it and then inside of the child component we want to receive conditional typescript properties you remember that old meme from 2010 where it says like never ask a man his salary a woman his weight and whatever that's precisely what we're gonna do right now we want a type props this is going to be a really good example and in these props we always want to receive the name of the person as well as their gender honestly if we were going off my channel demographics we could just leave it at this I decided to include female as well if you identify as anything else please don't take this as offensive I just want to make a simple example then we want the salary but only if you are a male and we want to wait only if you are a female now defining the typescript properties like this is a really good practice however it doesn't quite cut what we want to do let us try destructuring those components in the child for example we can get the name and Mark this as the properties we have just defined so we will get type safety then we can also destructure the gender the salary right here and the weight and we can save that child component now what we can see in the parent is we're getting an error because we're not passing any of those properties we have just defined for example the gender can be male or female right here the name can be something like John and now we also want to pass the salary because this person is a male however Nothing Stops us from a not passing it or B just passing the weight as you know something like 50 whatever that is not what we want when a gender is male we want to pass the celery as a mandatory property and the weight should not be able to be passed how the hell do we do that conditionally in typescript you see here's the problem the weight and the salary both are optional properties right now you can tell that by the question mark right here so you you don't have to pass them at all and you could pass them if you wanted to but there's they're not logically linked at all to the gender right here how do we do that well first off let's remove them and let's also remove the gender okay so let's format this and let's start with the property we always want past and that is the name property whether it's a male it's a female or anything else we want the name property to always be present and then in typescript to combine this object with another type we use something called the and operator and we can just insert an empty object for now right now that doesn't do anything for example if you try destructuring anything we would just get the name property however what this allows us to do this and operator we can wrap this parentheses and in here we can Nest another typescript operator and that is the or property so for example we could say or Another Empty object again right now this would not do anything because these are both empty objects but what we are saying here is that the type is always a name and it is an empty object or Another Empty object and in here we can conditionally or logically Define whatever we want for example we could say the gender in here is going to be male and when the gender is male this object right here will be passed so for example we expect the salary as a number interesting and then in the other case we want the gender to be female and we also want the weight to be passed as the number in that case so we have just conditionally and I think it looked better this way we always have the name property and one of these either this or this object as the properties and what this allows us to do now from the parent component where we render the child is past the name for example let's say Jane is the name then we can pass the gender and we get beautiful type safety intellisense for example let's pass this as female and we will get an error property weight is missing in type name String gender female but required and type gender female weight number awesome so we can see just because we have passed the gender as a female we only get access to the weight property that we need to pass though how awesome is that and if we try it to pass something like the salary as we did in the beginning of the video with 50 we can't because that is not a valid type for this however if we change the gender to male it would be because that is in our conditional type for the male gender in or child component right here this is what we are expecting if the gender is a male now if you wanted to actually use this in production I suggest you do it this way I just did small refactoring where we have the mail props defined separately right here with the gender and the salary and also the female props defined right here it's nothing else than the inline definition we had earlier but it just looks a bit or a lot cleaner wherever you define the actual properties because you have less inline typings and then really important the question of how do we get access to these values right here because we cannot destructure them we can destructure the gender but how do we get access to the salary or the weight can we just type them in no because they are conditional that won't work typescript might think oh these don't exist what the hell do we do and the answer is we do something called type guards instead of Destruction let's get the props as is and let's do a type guard that is we have an if statement and if the props.gender and now we get beautiful intellisense on that is either male or female well if the props or gender is male then typescript will automatically infer which properties we have access to for example we could console log the props Dot and now we have a salary awesome and else if the props.gender is triple equal to well female we already have the male case so only this one is left in that case we could con console log the props dot weight beautiful now in a real app you'd rarely use people and genders and salaries and weights so what could a real world use case look like well let's take a look at one very interesting one and that is right here let's define a type API response and that takes a generic if you don't know what it is don't worry Don't Panic we're gonna take a look at that here in a second and that is going to be equal to an empty object so let's put a status in here whether the API request is successful or not then the data of the generic type we're going to get to that here in a second and a timestamp which we always want to be there we could also Define this in both objects let's take a look at the second option and that is going to be an error status with the message of a string that we always need to pass when there's an error and also the timestamp property remember in the previous example this timestamp appearing in both we could also Define that which is a bit cleaner in the first object this one right here which is always going to be present but I just want to show you you can also do this in both separately if you want to and then let's take a look at a possible response that could come from the API whatever your API might be this is the response of type API response and this is a generic kind of like a function for typescript that we can now pass a type as if we were invoking a function for example the number and now we get beautiful type safety on the response type empty object is not assignable to type API response number because we are expecting some data here that we need to pass for example the status of success then we want to pass the data the actual API data response and then a timestamp that we always need to pass and let's take a look at the possible error response the response to and that is going to be as the same type API response as the generic number as if we were invoking a function but just in the typescript syntax so we're passing a number into here meaning the type of the data is going to be number with a status of error and now because we have a error status we can see we need to pass a message we cannot pass the data that is really really convenient so we can insert the message right here that we are expecting and in any case you know the drill we need a timestamp because that is present in both of the types that's why we're still getting an error here so if we pass the timestamp typescript is actually happy and we get full type safety for conditional typescript types really really nice hey if you like this video chances are you're gonna like the video where I talk about my current tag stack I really enjoy working with it and chances are you might too so it's going to be here on the screen somewhere and I hope you enjoyed that video I'm gonna see on the next one have a good one and bye bye

Channel: Josh tried coding

Views: 205,767

Keywords: typescript, joshtriedcoding, josh tried coding, tpyescript trick

Id: 9i38FPugxB8

Length: 9min 11sec (551 seconds)

Published: Wed Jul 05 2023