Objects 16 exercises
solution

Comparing Intersections and Interface Extends

In this lesson, we'll compare the behavior of intersections and interface extends in TypeScript.

First, we'll change the UserPart and UserPart2 types to interfaces:


interface UserPart = {
id: string;
name: string;
age: number;
};
interface UserPart2 = {
id: number;
phone:

Loading solution

Transcript

00:00 Okay, so I gave you a hint. I said interfaces instead of types. So let's just walk through that and see what happens when we do that. So we change these two interfaces user part and user part two and then we create a something out of them. So this type user this is going to be a

00:15 little bit trickier. We're basically saying okay user is a combination of user part and user part two but just changing user part and user part two to interfaces doesn't need to be doing anything yet. We actually need to change the user type to be an interface instead. So let's get rid of this

00:31 and let's just say interface user and let's just say it's an empty object for now. Now we need to say interface user extends both user part and user part two. We can do that by saying extends user

00:43 part and then comma user part two here. Look at that. And now we're getting an interesting error. This error is saying interface user cannot simultaneously extend types user part and user

00:57 part two. Named property id of types user part user part two are not identical. There we go. There is a named property of both of these interfaces and it is not identical. And it's basically saying that id can't simultaneously be this and this. This is really interesting.

01:15 This means that when you use interface extends here what it's basically doing is it's saying okay I'm going to compare all of the properties and I'm actually going to give you validation on which ones can be combined. And so this is not going to surface later when you actually

01:31 use the type. It's actually going to surface the moment that you extend the incompatible property. So look at this. Named property ids of user part and user part two are not identical. This surfaces in a bunch of different ways too. So we can remove this from user part two. Boom everything gone. And I can actually add it into here. Let's say id was a boolean or something

01:49 like this and then I still get this error here. Type of boolean is not assignable to a parameter of type or assignable to type string. Interface user incorrectly extends interface user part. So this is a really good way to compare between types and interface or rather between interfaces

02:09 and intersections because when we do an intersection we don't get any guarantees about the way that the types mush together. Basically just say okay we're mushing together user part and user part two. Sure we get name, we get age, we get phone inside here.

02:24 But when we have id string and id number when we combine those two together we actually end up with never because string is not assignable to parameter of type never. There's no compatibility between them so it just explodes into never. But we don't get a warning there. When we do it with interfaces

02:43 we're actually going to get a much smarter warning here which is really really nice when you're doing big kind of like inheritance stuff and interface stuff because if you didn't get this warning it would be really annoying trying to chase down exactly what part of the whole situation actually

03:00 sort of has an incompatible property. So by doing this TypeScript gives you a lot more clarity as to how to do this and it means that actually this is another pro for using interface extends over intersections when you're trying to model these sorts of inheritable kind of object oriented style