How to implement Conditional Props using TypeScript in React

hi guys welcome back to my youtube channel my name is dillian and if this is your first time here i'm a software engineer and i'm a content creator passionate about simplifying topics around the web so if this is content you'd like to see more of kindly subscribe in today's video i'll be showing us how to write or how to create conditional props using typescript react so let's get started firstly i'd like us to understand what conditional props in react is or what conditional props are now computationals in programming languages means you're trying to execute a statement depending on the condition so when a condition is met you're executing this and if that condition is not met you're executing that so bringing that context of conditionals into conditional props here you are specifying that when this condition is met you want these components to require this certain number of props and when this condition isn't met you want these components to require another set of props now enough with the theories let's look at that in code so this is a this is a simple application created which creates react app and then here i have the links array here i have my props here which type alias using typescript and i have an authenticated property to be a boolean which can be true or false and then i have a username to be a null of course it will be null if the person is not authenticated and every person is authenticated it will be a string and then over here i have my nav links which concat which of which if the user is authenticated and the username actually exists then we'll concatenate the profile link to the previous links else will concatenate the sign-in link to the previous links and then here we have the component declaration and then over here we can use it by saying header now header would require two properties header would require another authenticated to be false and header would require a username so if the authenticator can be a boolean so if the authenticator is false of course the username would be null and when we render this we have this home about sign in and if we have the authenticator to be true but leave the username as null over here we'll still have home about and sign in unless we remember to change this username to be a string which can be in this case dillian and when we go here we have home about delion now if you look at this code when you change the authenticated you also have to change the username if the authenticator is false and the username actually exists we still get the signing link so using conditional props we can tell these components that if the authenticated property is true you should also require the username but if the authenticated property is false then we do not need the username and this is how we do it we we do it using discriminated unions in typescript and this is what discriminated unions mean so we have a union which is an object or an object and in this object here we're going to have an authenticated of false not boolean this time it's going to be false and over here we're going to have an authenticated of true so this is a union of two objects which which means the components can receive false or true but that's not all since the username is going to exist when the person is authenticated then over here we can have a username of string no longer null or string just a string so this is telling this component now that when the user of these components provides an authenticated or false then you do not need to request for another property but then if the user specifies an authenticated of true then a username is going to be required but the reason why this is called a discriminated union is this over here you cannot do something like props dot username that's because username does not exist on props typescript as of this moment does not know that there is a username property on the props object and the reason is this typescript has a union so if the person provides an authenticated or false and you try to do props.username that's going to throw an error so this is a discriminatory union in the sense that they both share a similar property and these properties helps typescript to know the remaining definitions for the object so now we can have our nav links to bds so because nav links is equals to if props dot authenticated then we're going to concatenate hrl of profile and name to be props dot username you see now the props.username exists because typescript is aware that the authenticated is true but then using the other part of the ternary operator links.concatenate hrl for signing now over here if you try to access the props authenticate or props.username you're going to get an error because when the user when you're authenticated is false which is your other part of this scenario operator the username object does not exist so we do not need this line and then you can think i'm missing something here sign in and what's left that should be all okay name of sign in now this is how we specify conditional props and then we can go back here now to use this component now when you specify an authenticated or force you can see that typescript is already complaining because when it is false then the component does not require any other property and on the ui you can see type authenticated first username string is not assignable to authenticated force but when you specify an authenticated of true here and you erase this part typescript is going to complain again that there is a required username prop that you are not providing so this way you can now specify the username to betilion and then our ui is as it should be using conditional props with typescript as you can see in this video makes you to properly identify or properly specify the required props of a component without doing too many ifs in your component say this was a large code base and you're trying to access username in different places then you'd have to between um his props username not null his propulsion names a string then do this is proposal name string then do this but using conditional props all you have to do is just specify in one place if the person is authenticated then the username property exists but if the person is not authenticated the username party does not exist this also helps you to write cleaner code as we can see when you specify false there is no need of saying username should be null but when you specify true now you know that there are extra properties that you need to provide and that brings us to the end of this video so i believe you you have learned something new or now you have a better understanding of what conditional props in react are so if you like this video kindly like it kindly subscribe and also share with your friends

Channel: Dillion Megida

Views: 212

Keywords:

Id: fSivGWZ3iSQ

Length: 7min 36sec (456 seconds)

Published: Sun May 02 2021