The KEY to unions and intersections in TypeScript

Unions and Intersections are core features of TypeScript, but they can be rather confusing when you first start using them. These quick tips will make everything much clearer!

Learn More

[lukejagodzinski]

Yep that was one of the most confusing things when learning TypeScript. It gets even worse when you start working with it. Consider this example:

type HasName = { name: string };
type HasAge = { age: number };

type HasNameOrAge = HasName | HasAge;

(user: HasNameOrAge) => {
// user. <- No autocompletion
if ("name" in user) { // You have to narrow down the type
user.name; // <- Now it's of the HasName type
}
if ("age" in user) {
user.age; // <- Now it's of the HasAge type
}
// if ("name" in user && "age" in user) { <- It's not allowed
// user.name;
// user.age;
// }
};

You would expect the user to be either HasName or HasAge or both. But it can't. You have to narrow it down first. So it's not what you would expect from the union of sets.

[peterkohout]

Its like turning on a bright light in a very dark room. Love your ability to clearly express confusing and difficult concepts. Thank you for your generosity In making this available.

[zavarka]

I love this video. For the first time in so many years of using TypeScript, I understand why these types are called intersections and unions.

[vrojak]

Those 4 minutes were more valuable than 30 min of browsing the web in confusion

[wontcreep]

actually helpful and easily comprehensible :)

[mmmike]

Oh damn, this completely changed my perspective - and made the naming convention of union and intersection types make sense.

[BrunoReisVideo]

could you maybe talk about your dot-files folder in a future video? i’m starting to accumulate terminal apps and am having trouble organizing them and understanding .bash_profile and all that kind of stuff

[muhammadfaruq]

I was surprised how understandable tNice tutorials tutorial is, thanks!

[Adamskyization]

So Basiaclly, Given func(A), func(B).

The '|' operator is a logical OR. so you can do func(A), func(B), func(A, B)

and the intersection operator '&' is a logical AND. so you can do func(A, B) only.

Seems that "intersection" is not the right name for the operator '&' in typescript, as it contridcts the term of Intersection in computer science. Intersection of func(A) and func(B) will be the empty group.

I asked chatGPT to come up with some alternative names

Combination Type:
The "&" operator combines multiple types to create a new type, much like combining elements from different sets. "Combination Type" accurately describes the operation without conflicting with the traditional definition of intersection.

Merged Type:
The "&" operator merges the properties and methods from different types into a single type. This reflects the act of merging or bringing together multiple entities into one cohesive entity.

Composite Type:
The "&" operator creates a composite type by assembling various types into a unified structure. "Composite Type" implies the composition or integration of multiple types into a single entity.

Collective Type:
The "&" operator results in a collective type that includes all the features and attributes from the combined types. "Collective Type" signifies the idea of bringing together disparate elements into a comprehensive whole.

Aggregated Type:
The "&" operator aggregates properties and methods from multiple types into a consolidated type. "Aggregated Type" emphasizes the gathering or accumulation of various elements into a coherent type.

[IPKISS]

same as mysql inner join and full join

[ufneici]

what about this:
type oneAndAny = 1 & any; // the result is any;
The intersection of value that can be assigned to type 1 and values that can be assigned to type any is still 1, right ? Shouldn't the result be 1 ?

[connorallen]

The fact that the union is not an exclusive-or doesn't seem well supported by typescript itself. See the example below:

type Foo = { bar: string; test: boolean } | { wiggle: string };
const foo: Foo = { bar: "wiggle", wiggle: "wiggle", test: true };
if ("test" in foo) {
foo.wiggle < This raises a typescript error
}

The "Union" behavior is valid when setting the value, but the that behavior isn't fully respected when reading the value. I feel like this is the kind of thing that makes typescript pretty annoying. Like, I want to believe typescript errors, but sometimes it doesn't follow it's own rules very well

[edgarabgaryan]

here is another example of a non-intuitive TS type

type A = {
a: number;
z: number;
}

type B = {
b: number;
z: number;
}

type C = keyof (A | B) // guess what this type is

[usmanplayzmc]

Guys my GMS softs like a dead rat! How can i change it to the one that he has?

[lukejagodzinski]

The linked article has actually an error in the Part 2: Type creation.
The following example of union (also intersection) is incorrect. It's just the opposite of what is presented there.

interface ICat {
eat(): void;
meow(): void;
}

interface IDog {
eat(): void;
bark(): void;
}

declare function Pet(): ICat | IDog {};

const pet = new Pet();

pet.eat(); // succeeds
pet.meow(); // succeeds
pet.bark(); // succeeds

[Luxcium]

I made to much direct compliment to our TypeScript SuperHero so now let me talk about him like he is not watching...Did anyone else realize how much the colours in the video always adapt to offer us with a slightly different mood from one video to the next...I love particularly how each time regardless of the colour of his shirt everything is in harmony... I must admit that I do appreciate those videos for many many different unrelated or interconnected reasons... 😅😅😅😅 I hope everyone is going to love as much as I do such that he would be too successful not to post at least twice a week 🫣😮‍💨😵 (yea I realize that it implies a ton of work and efforts to produce a good YouTube video 😅 I am probably selfish but since I know it will ultimately benefit the entire community across the boarders of many lands I am passing the remark)... 🎉🎉🎉🎉