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

This TypeScript trick to conditionally include types is so useful, especially for React props. I've asked myself how this is done many times before, and it's just really cool to learn something so simple yet useful.

-- links

[mattpocockuk]

Great video! Here's the correct terminology to help people google this stuff:

Props is a discriminated union.
'gender' is the discriminator.
The if statements you use to check members of the union aren't type guards, that's something slightly different. You're doing 'narrowing'.

Love seeing these tips out in the wild!

[WebDevSimplified]

This is a trick I have been using for a while and really love it. One thing to note about this is that normal TS utility types like Omit and Pick will not work with Unions so you need to write your own version of these utils that look like this.

export type UnionOmit<T, K extends string | number | symbol> = T extends unknown
? Omit<T, K>
: never

[bryson]

I believe these are called discriminated unions

[vikingthedude]

For those curious, these are called tagged unions or discriminated unions. The typescript docs mentions them. They are common in functional languages and also in most newer languages like Rust. They are from a category of types called "sum types". What we're used to in OOP languages are usually "product types"

[chovnyk_pluve]

I think that it's better to write code more explicit

interface Person {
name: string;
}
interface Male extends Person {
gender: "male",
salary: number;
}
interface Female extends Person {
gender: "female";
weight: number;
}

type Props = Male | Female;

[muhammedmaher]

I've been looking for this specific trick for a very long time to no avail! thank you man! 🔥

[martinharyanto]

Please do more videos like this. This is very beautiful and and very nice. This can makes me refactor whole bunch of my component props type kudos Josh ! Great content !

[aminerhouma]

I really enjoyed learning that awesome trick you shared, especially with the helpful examples you provided. Your thoughts were also well-organized, which made it easy to follow along. Thank you!

[jaredbecker]

Saw this video when it first came out and thought it was really cool but never had a need for it until today so now I'm back to refresh my memory. Thanks Josh for this awesome little trick

[Ivcota]

Something similar happens when using the Zod parser. If you look the generic output type, you’ll notice how the isSuccessful being true is constraint to the output that contains the data while isSuccussful being false is constraint to the output that produces and error. The parsing logic os handled within the library but can be a good source of inspiration for these types of unions.

Great video 🎉

[Volbeast]

This was awesome man! Great explanation, been wondering how to get those conditional types to be so easy and you just nailed it!

[jenewland]

Great vid Josh 👍🏻 Always amazing when you learn these sorts of tricks in TS. One I learnt yesterday that's pretty cool is if you want intellisense for a string type that has set responses as well as the ability to pass any string you can do: type Gender = "male" | "female" | "prefer not to say" | (string & {}); now when you bring up autocomplete rather than getting nothing you'll get male, female, and prefer not to say listed in the dropdown. (Credit to Matt Pocock for this one)

[uixmat]

I was trying to figure out how to do this recently with no luck, so glad you uploaded this mate!

[MisouSup]

I just found your channel and I am really liking it. Good quality stuff :D

[daromacs]

amazing Josh, thanks for sharing and to the point, also noticing the real use cases!

[poizonncs]

Love the way you explained, Loud & Sharp.
Subscribed

[BlurryBit]

Life saving!!! I was looking for this for a long time. Thanks for the tip man! :)

[bosqwhl]

I spent the whole day today trying to figure out how to do this. Thanks to you and YouTube recommendations for this info!

[CrankyBarbaran]

THIS IS HONESTLY SO COOL. I was actually in a similar position, where I wanted conditional typesafety, but I legit couldn't find exactly what I was looking for. And this video was just that. I honestly loved it, THANK YOU SO MUCH!!

[jakeave]

This is exactly what I've been looking for. I've kind of just dealt with the possibly undefined properties. Great explaination!