Unions and Indexing 10 exercises
explainer

The Power of Union Types in TypeScript

An object type in TypeScript is like an object in JavaScript, and an array type in TypeScript is like an array in JavaScript.

But what is the JavaScript equivalent of a Union Type?

According to Gabriel Vergnaud, they aren't really able to be defined in the same way.

Union types represent differen

Loading explainer

Transcript

0:00 I spoke to TypeScript teacher, Gabriel Vergnaud, about union types. Union types are tricky because an object type in TypeScript, that's an object in JavaScript. An array type in TypeScript, that's an array in JavaScript. What is the JavaScript equivalent of a union type? How do you explain that?

0:19 To answer this question, we have to step back a little bit and try to understand what union types represent and how do we create them. There is no way to create a union type. A union value like this doesn't exist because union types just represent different possibilities your code might handle over time.

0:44 For instance, let's say I'm walking to the office. I really want a coffee, but I'm running a bit late. I have to make a choice. I see a coffee shop. Do I enter and grab a coffee, or do I just go straight to the office? As a person, I'm going to make a choice. I'm going to decide. If I grab a coffee, I'm going to be late. If I keep walking, I'm going to be on time.

1:08 If you map that to some TypeScript code and you have a function that takes this action as a parameter, from the perspective of TypeScript, all of these possibilities exist simultaneously. It's like you have different parallel universes. Everything that can happen, happens. When you define a union type, I like to say -- I know it's a bit silly, but I find it funny -- I like to say that you create a multiverse.

1:38 Suddenly, those two things exist simultaneously. From the perspective of TypeScript, it's really what happens because this action, since we don't know what it is, we can just pretend that it's both. If it's both, it means that everything that you do with this value need to be evaluated for all possible cut paths that you are defining.

1:58 That's where this idea of multiversity becomes interesting because sometimes you will have one value and then it branches out. You have a bunch of possibilities. You create new possibilities. Then all of them generates new and new possibilities, more and more possibilities.

2:15 The idea of union types is that they represent the different possibilities in your code and the different possibilities that your code cares about on the type level. Your code will be run at runtime. It could be run with lots of different values. It's about this different multiverse of possibilities where every time you get called with a new value, it branches off in a different direction.

2:37 These branches can have more branches until you end up with a very complex web of different possibilities. TypeScript can understand them all. It's very cool.