Interfaces

[00:00:00]
>> Anjana Vakil: Let's talk about some of the fancier types that TypeScript allows us to work with Folks might have seen this keyword around, especially in other people's code: interface Has anybody encountered this OK And also if you come from other programming languages, you might be familiar with the concept of interfaces For our purposes, we can think for now of interfaces as a different way of defining object-y kind of types

[00:00:35]
So earlier we had like type event equals object stuff with property, colon type In an interface, it looks almost exactly the same, except you usually see semicolons instead of commas, and again, this is a purely TypeScript entity This will not exist in our output JavaScript, but we can use the type that we declare here We say interface, interface name, and that is going to be something that we can use just like a type alias

[00:01:14]
So we can say this variable should be typed like a user Now, you might be wondering, OK, but we already had type aliases for that, so what's the deal Well, the cool thing about interfaces is that they're sort of a little bit like class-y kind of things You can extend them and add additional information to interfaces that allows for much more composable, much more reusable types and subtypes

[00:01:48]
So you will often, especially in more complex TypeScript projects, see a ton of interfaces, and a lot of this word extends And what extends does is a lot like inheritance in kind of object-oriented programming in other languages, but suffice it to say, we can understand it as it's literally extending the object-y type that we declared with the interface user and adding stuff onto it

[00:02:27]
So for example, if I already had my user interface and the user interface has a username and an ID, I can now create versions of users that are maybe more specific or have additional properties For example, I could have a human which extends user, so it has all of the characteristics of a user, meaning it has the same properties from my user interface and whatever else it defines there

[00:03:03]
So in this case, a human has like a full name, presumably, unless it's a symbol like Prince or the artist formerly known as the artist formerly known as Prince, but an AI agent on the other hand, which could also be nowadays a user of our program, has a model name instead, for example And so this is how we can start composing our types and building more and more complex types, and the thing is that this interface extends is a way that we can do that that doesn't work with type aliases so well

[00:03:44]
And there are also some like performance benefits a little bit of using interfaces instead of type aliases that go to object types So often if you're declaring something that's an object-y type, might as well make it an interface It's a little bit more flexible and a little bit more fast But so let's see how we can use these now So now we have types, human and AI agent, and those types know about the user type that they extended

[00:04:21]
I'm going to go back here and copy some of this code into our BFF, the playground Looking at it all together, we have a user that has a username and an ID We have a human that extends user with a full name and an AI that extends user with a model name And so now we can start typing our values with these types, human and AI agent And so, for example, I can make a human called Batman

[00:05:06]
And we'll note that username and ID are valid properties on the human because of that extends user So even though where we actually directly declared human does not say anything about usernames or IDs or whatever, it's pulling that information from the user interface And if I were to, let's say, add a car bat mobile literal type, no, or just a car string, let's say, to the user interface

[00:05:40]
Well, first of all, it broke my user because it's going to say, hey, you said that users are supposed to have a car, but they don't But it's also going to break my Batman because it is inheriting whatever the shape of that extended type is So it can also be very convenient to be able to kind of evolve types as you go by using interfaces that extend each other so that you don't have to like copy paste or like update the types all the time

[00:06:18]
OK, no cars So now, similarly to how it would work if we had defined human as its own interface that didn't extend anything, it's going to say, hey, hey, hey, remember that full name property You forgot it here And it's going to tell us exactly where full name is declared So if we put that car back, it's going to say, hey, on line 4, you said that the interface of a user has a car property, you declared that up there

[00:07:08]
And so if I were to, let's say add car bat mobile Now it's OK with it, and if I forget to add a full name, it will tell me, hey, hey, hey, you declared full name on line 10 Now, the difference between 4 and 10 is not that much, but when you're dealing with a whole bunch of types and a whole bunch of modules and all this stuff, this can help you narrow down like where you need to look at what types you're declaring and how to make sure that everything is shaped the way you want it to be

[00:07:39]
OK, let's forget about Bat mobiles OK, and go back to our, and yes, as we see, same as before with our object type aliases, it's going to say, hey, hey, hey, you didn't say anything about a car So either make an optional property or just don't do that Thanks, TypeScript OK But yeah, similarly, it's going to say missing properties Like, for example, if I have an AI agent that has a model name but no username or ID, that's a problem, because AI agent also extends user, so same logic

[00:08:26]
So this is again, we're getting more powerful with our TypeScript toolbox of ways that we can create and reuse and compose different types And so you will see a ton of interfaces in TypeScript projects out in the wild You probably have already run into them And if you see this extends word now we sort of understand a little bit better what it's doing, and sometimes you have like very deep sort of chains of types being extended and so on.