React.js TypeScript Conditional Props - Props that depend on other Props

[@Burn0u7]

I saw link to this video from Reddit. I hasn't seen anyone explain so well advanced typescript concepts in a while! This video is like the best half hour I've spend in a while in this pandemic. I think every library developer should know this usage of generic and discriminated unions.

[@BrunoAntunesPT]

Your comment means soo much to me. I don't think I can put to words the happiness I felt waking up this morning to your comment, I'm speechless!!! You are amazing!! Thank you soo sooo much for your wonderful words my friend 😍😍😍

[@Aranueth]

That;s the most amazingly honest review I've read in a while, I'll definitely give this a look.

[@AmitErandole]

This is the one that knocked it in with the concreteness of the examples. The other tutorials were just too abstract and playing around with letters

[@BrunoAntunesPT]

Very very happy to read that. Thank you very much 😍

[@konar7466]

Thank You Bruno for this great video. I learned something from it! Very good explanation :)

[@Matt36788]

"What can we do to make TypeScript complain at us?" I'm trying to avoid this everyday 🤣 Great video, thanks for making and sharing Bruno!

[@BrunoAntunesPT]

Thank you very much 😍😍😍 Ahahahah I remember I laughed at it when I was editing the video 😅😅😅

[@tririfandani1876]

React shines brightest with typescript among the other frameworks/libraries 💎

[@BrunoAntunesPT]

React and TypeScript seems like a perfect match!!! =D Angular also provides an amazing experience when working with TypeScript. I can't speak about vue3, because I have not tried it out yet =D

[@Omar_Al_Seddik]

Words can't describe how much I love you and your channel, Bruno.

[@BrunoAntunesPT]

Thank you soo soo much Omar ❤️❤️❤️ you are very kind 😍

[@rafaborowski2323]

The most frontend value content on YT. Thanks a lot!

[@BrunoAntunesPT]

Thank you 😍😍😍

[@susithra28]

Coming from Javascript background, although I know all the concepts of Typescripts that is explained in the video, I found it very difficult to apply. Your explanation gave me confidence since every single new concept is explained with a simple practical example. Truly amazing. Thanks a lot Bruno !!

[@BrunoAntunesPT]

Glad it was helpful! =D

[@sergioramos0709]

Finally TypeScript Conditional Props explained in such a nice manner. Great video (y)

[@BrunoAntunesPT]

Thanks a ton Shubham 😀 I'm very happy you liked the video! 😀

[@hamzahmd_]

I have learned the whole React TS in this video. Thanks for the easy explanation.

[@yassinerassy6840]

i've been waching alot of videos about typescript advance but they just didnt fit on real cases study but with your exemples using react im really excited to use it with react and i can see now clearly what are the beneficts ! thank you so much for your efforts !!

[@BrunoAntunesPT]

Thank you Yassine for your amazing comment 😍 If you have any question, even if it seems simple, let me know, I'll be here for you 😊

[@yassinerassy6840]

@@BrunoAntunesPT thank you 😊 !

[@joseavilasg]

Awesome. I didn't expect to see the video until the end, but I did.

[@CodaJohnPaul]

Awesome video, Bruno! So far, your series has covered everything I want to know, thank you! *** To anyone reading, I highly recommend Bruno's videos. I had NO idea you could do so much just using types. Amazing.

[@JanderSilva01]

Bruno, I wanted to know how to do this since I started to learn Typescript. Thank you again.

[@BrunoAntunesPT]

I have received a few questions about this subject lately, so I decided to create a video explaining it. I'm very very happy it is useful 😍😍

[@cseguino]

Amazing once again. Each time you manage to level up my skills. Your knowledge of typescript and your art of teaching it is a blessing.

[@BrunoAntunesPT]

Thank you very much for your words Christophe 😍😍 I really really appreciate your comment my friend 😍😍

[@morrisseybr]

Wow man! This is GOLD! My thank you very much coming from Brazil!

[@BrunoAntunesPT]

Muito obrigado Samuel =D Fico muito feliz ao ler o seu comentario!!! 😍😍 Um abraco deste amigo Portugues =)

[@tarunsukhu2614]

Your content is great . Your humble way of presenting is really nice

[@BrunoAntunesPT]

So nice of you to say that, thank you very much Tarun! 😀😀

[@vitorpereira7606]

Amazing job Bruno (as always)! Once again you helped me, thank you so much!

[@BrunoAntunesPT]

Happy to hear that Vitor! Thank you 😍

[@nishantshah_]

Hearty thanks for making this tutorial in such an understandable way. It has helped me a lot. 👏

[@manishborkar7582]

You get your self a new subscriber @Bruno , I am new to typescript and having issues but your video solves all of them, Thank you for the good explanation....

[@marlonmarcello]

Love the intro and the straight to the point use cases. Thanks for your work!

[@BrunoAntunesPT]

Thank you very much Marlon 😀

[@elioviaggi9701]

Molto utile, grazie per la condivisione Bruno!

[@BrunoAntunesPT]

Grazie Mille =D

[@DanCortes]

I recently started using TS with React and this video was so helpful. Thanks a ton!

[@BrunoAntunesPT]

Thank you Daniel! 😊 Glad it was helpful! 😀

[@nim3743]

Brilliant video. Easy to follow. Very useful concepts. Thank you.

[@BrunoAntunesPT]

Thank you 😀😀

[@AmarMishra]

Awesome explanation Bruno. Your content is amazing .

[@niara9700]

Typescript is amazing. Very insightful tutorial. Thank you.

[@BrunoAntunesPT]

Thank you very much 😀 I agree with you, TypeScript is amazing!!!!! 😀😀😀

[@IgorSilveira]

This saved my life. Extremely well explained! Obrigado, Bruno 😃

[@BrunoAntunesPT]

Muito obrigado Igor 😍😍

[@Fatima-ie5kj]

I m so glad, we have a instructor like u thank you so much for providing awsum content ❤️❤️

[@BrunoAntunesPT]

I'm even more glad to have someone like you watching my videos 😍😍😍😍 Thank you very very much Faisal 😍

[@codewithtyson7878]

@@BrunoAntunesPT don't say thanks bruh u deserve . Glad found this channel. Love from uae 💓

[@BrunoAntunesPT]

@@codewithtyson7878 I feel very lucky to have amazing people watching the channel. I feel very grateful 😍😍 UAE? United Arab Emirates? I want to visit Dubai soooooo badly!!! 😀😀

[@codewithtyson7878]

@@BrunoAntunesPT yea it's United arab emirates, n always welcome bro, ❤️💜

[@BrunoAntunesPT]

I'll go there one day, for sure!!! 😀

[@aayush135]

Very nice use cases. Your explanation was amazing. ✨✨

[@sergiob3698]

Hi Bruno I didn't know TS was so powerful! Super cool Thanks for sharing

[@BrunoAntunesPT]

Thank you Sergio 😀 I always love to see your comments here, thank you soo much for the support my friend 😍

[@hhskladby1596]

Great fun + know-how, but you should say "type alias" for the "type NAME = TYPE" construct

[@BrunoAntunesPT]

Thank you very much 😍 what did I call it in this video? (I don't remember but I'm curious) 😂

[@hhskladby1596]

@@BrunoAntunesPT You say just "types" what may be misleading and is no help for those who want to find details in the docs, having "alias" as the official terminology and specific concept

[@BrunoAntunesPT]

@@hhskladby1596 ah...I'm relieved, I thought I had called it something worse but the way you said it initially 🙂😅

[@mohdsajidshaikh4291]

Nice. Waiting for your videos atleast a week

[@BrunoAntunesPT]

Thank you 😀 hopefully I can record something for next week 😅 Do you have any video topics you would love to see covered in the channel? 😀

[@mohdsajidshaikh4291]

Yes i shared before. Nextjs blog with typeorm (for typescript).

[@CreativeJE]

long time no see man. Thanks for awesome video

[@BrunoAntunesPT]

Thank you for visiting the channel 🙂

What an amazing explanation!

[@BrunoAntunesPT]

Glad it was helpful! =D

[@jonasgedrat658]

Show de bola, parabéns amigo, continue sempre ajudando, é muito bom.

[@BrunoAntunesPT]

Muito muito muito obrigado Jonas 😍

[@kushnirov]

I found at last week your video about npm publishing flow with github actions and subscribed, but I didn't expect that on the weekend I unexpectedly find a video describing a solution to a typescript issue in a project that I didn't solve, I've tried to write a solution for the Dropdown case from the example, but ended with a ts-ignore, thanks, want to refactor that code now

[@emmyelijah7395]

Nicely done Bruno

[@BrunoAntunesPT]

Thank you Emmy 😀😀

[@chioo9495]

Thanks Bruno. NextJS TS + Graphql with codegen is good. i wish you make a crash course about that someday :)

[@BrunoAntunesPT]

Thank you 😀 That's for sure an interesting topic! Curious to know, are you using Apollo client or some other client currently? 😀

[@chioo9495]

@@BrunoAntunesPT Yeah!. Apollo Client would be Great!. You also do a Poll about that in your YT Community

[@abdulazeezolanrewaju843]

Thank you so much... Can you please give more details on Types and Interfaces

[@BrunoAntunesPT]

Thank you my friend =D From the typescript docs, they have a very good summary (in my opinion): "Type aliases and interfaces are very similar, and in many cases you can choose between them freely. Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable." You can read the full article at: www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces

[@anoopvasudevan]

Good one. Thank you. One question, like in example 1 with discriminating unions, how can we destructure the props received by the function?

[@BrunoAntunesPT]

Thank you 😍 You need to narrow down the type you are working with for typescript, you can't use destruct. For example something like: ``` if (props.shape === "rectangle") { // over here you now have all the rectangle props like height and width :) } ``` You can see more examples and a deeper explanation over here: www.typescriptlang.org/docs/handbook/unions-and-intersections.html#union-types I hope this helps 🙂 let me know if you still have questions 🙂

[@ТимурСагайдаков]

Big Thanks from Russia)

[@BrunoAntunesPT]

Thank you 😊😊 greetings to my Russian friends 😉😉

[@arsalanshaikh3763]

Thanks a lot for the insightful video very helpful.

[@BrunoAntunesPT]

Thank you my friend, I'm very glad it was helpful! 😀

[@eqntdhjn]

Thank you very much for the video!

[@javiergarciafillol4454]

Good video I learned what I was looking for

[@alinawaz4034]

Amazing video love to see these

[@BrunoAntunesPT]

Happy to know that! Thank you 🙂

[@MrKeepItTrill]

Excellent video, really helped me level up my TypeScript skills. One question: for the last example, are the any advantages/disadvantages to doing this instead, or is it identical?: type DropdownStrNumProps = { data: Array; labelProp?: never; valueProp?: never; }; type DropdownObjectProps = { data: Array; labelProp: keyof T; valueProp: keyof T; }; type DropdownProps = DropdownStrNumProps | DropdownObjectProps;

[@raphaelpc]

Amazing explanations!

[@BrunoAntunesPT]

Thank you Raphael 😀😀

[@brmourinha]

ganda maquina :D conteúdo excelente Bruno. Parabéns. Abraço

[@BrunoAntunesPT]

Muito obrigado grande Bruno 😀 um grande abraço 😀😀

[@gambit3904]

Thank you, Bruno!!

[@BrunoAntunesPT]

Thank you my friend 😀

[@mustafwm]

Thanks, that was informative. I just learned about forcing types to be true/false (i.e. deafultCollapsed: true) and first impression is: not a fan. I feel they restrict users from passing dynamic values to props. .. but still good to know they're there :)

[@BrunoAntunesPT]

Glad it was helpful! =) I received quite a few questions lately asking how to do that... so I decided to add it in this video :D As you saw, I'm also not a huge fan =D

[@pinocodex]

Super helpful man! Thanks

[@BrunoAntunesPT]

Happy to know that ❤️

[@hugodsa89]

Hey Bruno, A few issues I found with your last example: 1 - after the ternary testing whether the generic extends a number or a string, it is unnecessary to have labelProps and valueProps with the type of never, better to simply not have them. 2 - there is an issue with the generic type, in the case that it is not a number or a string, it could be a boolean, or an empty object, or literally anything else so I would suggest testing for that too maybe. 3 - your valueProp and your labelProp can be the same key of the generic type and that wouldn't something desirable in most cases. How would you suggest to handle these?

[@BrunoAntunesPT]

Hello Hugo, Let me answer one by one, probably it will be easier 😂 If you have any questions, let me know 😊 1 - This one will boil down to personal preference. You can decide to keep "never" there or remove it. I personally prefer to keep "never" there, because it shows my intentions in a much cleaner way to the next developer that reads my code. Don't forget that this is a very simple example with only 3 properties - when we have real world types with 20+ properties, multiple unions, generics with , etc... it's easy to get lost in all that Adding "never" helps me on my mental mappings, but I know that not everyone is like me and that's fine. I honestly don't mind to write a bit more code in hope it will helps my colleagues in their mental mappings as well. I apply the same concept regarding documentation 😊 In the end, use something that you and your team can keep consistent and feel comfortable with - that's the most important thing 😊 2 - I'm aware of that, you can add more restrictions, this was just for the example 😊 3 - I understand what you want to do, but I don't agree with you on this one. In my view, it's not the responsibility of this component to decide that. We should give the developers using this component that power/responsibility, because that will depend on the data they are using. Actually, last week (Tuesday or Wednesday) I had a task that would be "impossible" with that "limitation" 😊 I can even describe it - I received all phone numbers from a user in the following format from the API: [{phoneNumber: 987654321}, {phoneNumber: 123456789}] As you can see, my key and label had to be exactly the same, even if I wanted to, I had nothing else to grab... 😊 Those type of restrictions/optimizations seem nice at first, but as soon as your colleagues start to use real APIs, those restriction might become blockers. Of course, in my case, I could do an arrayFromApi.map(a => a.phoneNumber) and get an array of strings, but... I would absolutely hate a component that forced me do that... 😂 We want the types to help people during development, not to block them or annoy them when what they are doing is completely valid 😊 If after knowing the limitations of that decision, you want to go ahead with that, you will want to use Exclude utility - www.typescriptlang.org/docs/handbook/utility-types.html#excludetype-excludedunion I hope this helps 😊

[@BrunoAntunesPT]

Now that I'm thinking a bit more about point 3, I don't even know if you can achieve it that easy... maybe yes, maybe not 😊

[@hugodsa89]

@@BrunoAntunesPT hey thanks for getting back to me. I really appreciate. 1- I get what you mean by being verbose and explicit, I find the only advantage is the fact that when in a PR you’ll have to accept the removal of a line with an explicit intent rather than accepting the addition of a line with the same key name and that could potentially go against the intended definition and use to begin with. So I agree there, but i also find that you could probably use some form of Pick utility type and enforce all others to be never, not sure exactly what approach to use here, but definitely not writing all the keys would be the best approach. Anyway I like your point, though wouldn’t use it in production. 2- what I meant is that would probably be best to have a better defined handling, rather than testing for string and number, and hand off all other cases to the false side of the ternary, maybe handle the case by checking for a non empty object array, and then pass all other cases to the false side of the ternary. 3- yeah this is quite hard I was hoping to use typeof but not really possible even with usage of exclude or omit. Though would love to know how it could be achieved. Thanks! Well done mate. Keep up the good content. I’d love to see you go deeper with the ts type system. 👍🏻👍🏻👍🏻 it’s actually extremely powerful.

[@BrunoAntunesPT]

Thank you Hugo 😀

[@alapatisrikanth3412]

Liked it U made it look lot easier

[@BrunoAntunesPT]

Thank you 😀😀 I'm glad you enjoyed it 😀

[@jibinkoshy2739]

awesome explanation

[@BrunoAntunesPT]

Thank you Jibin 😍

[@damiangilz]

That's brutal!

[@BrunoAntunesPT]

TypeScript is amazing my friend!! 😀

[@damiangilz]

Yes I love TS but I tend to shy away from generics because I quickly forget the application. After some reviews from your code I have much more clarity. Thanks. I didn't even know about the intersections. Pretty amazing! Thanks!

[@BrunoAntunesPT]

Thank you for saying that. You made me happy 😍😍

[@vladahinski5699]

Thank you so much! 🙏

[@BrunoAntunesPT]

Thank you Vlad 😀

[@ThienTran-lj8id]

Its really awesome, many thank you

[@bryanprimus]

when we hover the component the error message is unclear. especially for oneortheother component, is there a way to manually set the error message?

[@BrunoPereira-mo6kg]

Great video Bruno 😁 thank you so much! I've just one doubt, in the part of the video you place valueProp="b" and b was a property of the object, that would fail, it wouldn't return the proper value. There is any fix for this case? Thanks a lot 😁

[@BrunoAntunesPT]

What do you mean Bruno? Se quiseres podes dizer em português 😊 BTW - I love your name 🤣🤣🤣🤣🤣

[@BrunoPereira-mo6kg]

@@BrunoAntunesPT 🤣🤣🤣🤣 A pergunta que estava a fazer de certa forma já percebi... foi no minuto 22:19 em que estavas a colocar valueProp igual a "c". Mas não tinha reparado que na "data" estava um objecto com as propriedade a, b e c. Estava a parecer que era uma array em que em cada item tinha uma propriedade diferente, ou seja [0] = {a: "1" }, [1] = {b: "2"}, [2] = {c: "3"} e por isso não estava a perceber, porque não fazia sentido o valueProp ter uma propriedade que só existia em determinados itens. Mas já percebi que era um objecto 😁 Thank you!

[@BrunoAntunesPT]

Ahhhh awesome 😍😍 por acaso quando fizeste a pergunta fiquei super confuso ahah 🤣🤣 Verdade seja dita, eu podia ter criado um objecto com nomes decentes em vez de a, b, c, 😅 my bad 😅😅😅😅

[@BrunoPereira-mo6kg]

@@BrunoAntunesPT não, não tiveste culpa 😅 eu é que percebi mal 😅 desde já obrigado pelo vídeo e pelo tempo para ver comentários 😁

[@BrunoAntunesPT]

Obrigado eu por veres o vídeo e pelo feedback grande Bruno 😀😀

[@gustavolodividaletti803]

Olá Bruno! Tudo bem? Será que temos como fazer isso para componentes? Por exemplo: {} }} /> E, nesse caso fazer com que o 'componentProps' carregue as Props do componente passado na prop 'component'? Eu só consegui fazer isso funcionar como patâmetros de uma função, utilizando React.ElementType e React.ComponentProps.

[@dauletbaimagamabet]

Excelent video, thank you

[@mateusvahl5072]

Awesome!

[@BrunoAntunesPT]

Thank you Mateus 😀

[@zvrk]

Thank you for an awesome video

[@BrunoAntunesPT]

Thank you very much Milos! Glad you enjoyed it! =D

[@ukaszkonatowski4661]

Hey @BrunoAntunesPT :) Thank you for this tutorial! I have some issues with creating conditions related with displaying proper component. Could you help me with this? To be more specific, I'd like to create CustomLink component which will return MUI5 Link component OR MUI Link component with Link prop - "component={NavLink}" from react-router. I want to have a condition where you can pass "to" prop OR "href" prop. If I pass "to" prop, I want to allow developer to share props from MUI Link component and React router NavLink component. If I pass "href" prop, I want to allow developer to share only props from MUI Link component. I am struggling with it quite a while, but I still have some lack of knowledge how I could do that (probably using generic types). I was looking for it in some resources like in MUI and there are some solutions, but not exactly what I've described. If you are willing to help me with this or anyone else, I would be grateful. If not, that's also ok :) All the best!

[@rangabharath4253]

Awesome as always 👍😀

[@BrunoAntunesPT]

Thank you very much Ranga! 😀😀😀

[@soyoungk9673]

good! thanks! I'm subscribed to your channel!:D

[@BrunoAntunesPT]

Thank you 😀

[@thinBillyBoy]

I have a question, Bruno. If I want to use one thing or another thing but both with different stylesheets what should I do?

[@BrunoAntunesPT]

It depends quite a lot on the tech you are using. It will depend quite a lot on what you use: CSS/SCSS/LESS files? Styled Components? Emotion? Material-UI? :) For material-ui they have this good example playground: material-ui.com/customization/color/#playground

[@AmitSNamboothiry]

Lifesaver 😊

[@JeFn76]

thx, it solved my problem

[@BrunoAntunesPT]

That's awesome 😊

[@mgominasian9206]

why during destructing it gives an error.

[@BonBonInoc]

hi how can i render other props ? i cant seem to access like {props.height} etc. please help

[@BrunoAntunesPT]

You need to narrow down the type you are working with for typescript. For example something like: ``` if (props.shape === "rectangle") { // over here you now have all the rectangle props like height and width :) } ``` You can see more examples and a deeper explanation over here: www.typescriptlang.org/docs/handbook/unions-and-intersections.html#union-types

[@BonBonInoc]

@@BrunoAntunesPT yeah I have to conditionally render the props also. Thanks Bruno! Keep it up

[@VenusOnlineSoftware]

hey I see here is the best tutor. export interface TeamProps { establishments: Option[]; members: Member[]; } export interface Option { id: string; label: string; } export interface Member { avatarUrl: string; name: string; } can you tell me how to pass props for the these types of arrays when the component is called in another component?

[@BrunoAntunesPT]

Thank you very much 😍 Sorry, can you detail a bit more what you want to achieve? if you have a component like: ``` export function YourComponent({establishments, members}: TeamProps){ .....} ``` then to call it somewhere you need to: ``` ``` Not sure if this is what you are looking for, please let me know :)

[@mkonin]

thnx man from 2022

[@mfion1]

Awesome

[@samerkayali4525]

Amazing content!!! Already subscripted!

[@BrunoAntunesPT]

Thank you very much Samer 😊😀

[@dennisgonzales9521]

thanks!

[@doniaelfouly4142]

thanks

[@vittoriomorellini1939]

Hi Bruno. Are you expert of reactn? Do you use it?

[@BrunoAntunesPT]

By reactn you mean react native? If that's the question, the answer is very short: "no" 🤣🤣🤣

[@vittoriomorellini1939]

@@BrunoAntunesPT hi Bruno. You are a good teacher. I meqn reactn the way to manage the global state. It's an easy way respect to redux

[@BrunoAntunesPT]

Thank you very much 😍😍 Ahhhh I see... But the answer for that one is also "no" 🤣🤣 the longer answer is that I stopped using redux probably around 2 years ago (more or less) 😊

[@vittoriomorellini1939]

@@BrunoAntunesPT ok. Good. What are you using for the state?

[@BrunoAntunesPT]

Most applications I know are using redux as some kind of "cache" between server and client. For that scenario something like swr or react-query is a much nicer and easier in my opinion 😊 When I need states and transitions between states (basically a state machine) I have used xstate and I'm starting to fall in love with it for those very very complex state machines - I'm not a specialist in xstate yet, but I'm loving every second I use it 😊 With swr and react-query alone I feel most applications don't need redux. When you add xstate, it's even better. This being said, some people love to use redux, and that's nothing wrong with it. In the end as I always say, more important than the tools we use is what we deliver as user value. If you are able to be more productive with tool A vs tool B, just use what you are best at, your users don't care if it's redux or anything else, as long as it's fast and they can do everything they need in your app without bugs 😊

[@arunkumar2786]

Hello bro . I think are u busy that why u not upload videos.

[@BrunoAntunesPT]

Yeah.... I have been very very very busy. I'm trying as hard as I can to go back to more frequent uploads, but it has been very hard lately to find the time, I'm sorry :(

[@changemaker2909]

First Comment

[@BrunoAntunesPT]

Thank youuuu =D In the future, I need to think about some kind of prize for the first comment 😀

[@Svish_]

Couldn't you just leave the properties out, instead of using never?

[@BrunoAntunesPT]

In this examples I showed you need them there 😊 Better than any words I can say in the video description you can find the github URL 😊 let me know if you have any other questions after playing with it 😀😀