Typescript's Most Misunderstood Feature: Unions and Intersections

[@elielberra2867]

Amazing explanation! Thank you for sharing the results of your research and demonstrating with clear examples :)

[@vencler]

Hey what terminal/shell/editor did you use in this video? And do you have color scheme configuration for it? Talking about 4:10 to 7:10 segment of the video. Thank you!

[@orrshalev2604]

Amazing videos! Hope you continue to upload, I’m sure you will blow up very soon :-)

[@echobucket]

User Land vs Type Land is really Run Time vs Compile Time

[@Cwstra]

I’ll go ahead and send any readers of this comment down another rabbit hole: this behavior is related to two concepts: covariance and contravariance. For these examples, assume we were using the `type Pet = Dog | Cat` definition. Say we had an (immutable) `List` type, with methods like `map` and `filter`. We can (correctly) intuit that, since a `Cat` is a `Pet`, a `List` is also a `List`. This behavior of `List`s is known as covariance: if `A` is a `B`, then a `List` is a `List` For another example, think about a (readonly) `Record`. We could definitely use this wherever a (readonly) `Record` was needed, so (readonly) `Record` is also covariant, at least as far as `T` is concerned. Now think about a very different type: actions, which we could define as `type Action = (val: T) => void`. Is `Action` covariant? Well, here’s an `Action`: `(cat: Cat) => cat.meow()`. If we tried to pass in a `Pet` instead, we might end up with an exception: that `Pet` could be a `Dog`, which cannot `meow`. So it really doesn’t make sense to say that a `Action` is a `Action`. What about a `Action`, say `(pet: Pet) => pet.eat()`? Well, it’d be perfectly fine to pass a `Cat` or `Dog` here; after all, both can `eat`. So because a `Cat` is a `Pet`, an `Action` is an `Action`, which is backwards from how `List`s work. We call this contravariance: if `A` is a `B`, an `Action` is an `Action`. Let’s look back at readonly records again: what if we were talking about the key type, rather than the value? Think about a `Record` and a `Record`. Obviously, anything that’s an `"eat"` is also an `"eat" | "meow"`. But a `Record` definitely has the one property an object needs to be a `Record`, namely, `"eat"`. So from that, if `A` is a `B`, then a `Record` is a `Record`; contravariance again, This last point is crucial to the phenomena in the video: because a union of objects could be _any_ of the objects, the only safe properties to access on a union are the ones which are shared between them. The contravariance of the keys sorta flips the union of objects into an intersection of their keys. All that to say, it’s not so much Typescript’s fault, but just the weirder points of how types need to work.

[@nashmcguire5771]

Good stuff👌

[@brianhayes1105]

Very nice.

[@muzzamilraza]

Which terminal emulator you are using?

[@techworld3043]

well nice video, but i could not understand that much. i should start learning typescript.

[@mvargasmoran]

I hate this, what's the point? to look more clever by using broken stuff? Typescript is just another JS

[@ifcodingwerenatural]

Honestly though, the more you get into Typescript, the more you realize it's kind of a messed up language sitting on top of another messed up language 😂

[@mvargasmoran]

@@ifcodingwerenatural I found it baffling that it didn't solved some of the JS weirdness, why are you making a new lang just to preserve the worst parts of the one you are supposed to replace? 😔