This course has been updated! We now recommend you take the TypeScript Fundamentals, v3 course.
Transcript from the "Combining Interfaces" Lesson
[00:00:00]
>> Mike North: So we can use index signatures in combination with other types. And this is where I'm actually showing off a couple things here. Number one, I have created another interface with the same name of what we were just using, right? Up here, we had PhoneNumberDict.
>> Mike North: And now down here, same exact name.
[00:00:22] And if we look at this, if I try to remove it, we're now getting an error. So let's look below and study what we've added in order to figure out why something might be erroring. What I've added is new types. They kind of say we have new required properties.
[00:00:42] Everyone must have a home phone number, and an office phone number. And, the index signature still exists underneath all of that. So that's what's making it so if we attempt to delete this up here, we're getting an issue where home is missing. Now we could totally add another one here safely,
[00:01:05]
>> Mike North: iPhone, I just need a comma. And that's fine and we're free to add and remove this as we see fit. So you can use index signatures in combination with anything else that we have learned about object types.
>> Mike North: Often this will be a fallback where you specify certain things like, we know we can access these things.
[00:01:25] So, for example, it would be convenient to be handed this thing. I don't have to check whether home and the office are undefined. If you know they're present for sure, it's much nicer to be handed this thing that's ready to go. But, there may be optional extra stuff there and an index signature would be a way to facilitate typing that.
[00:01:53]
>> Mike North: We kind of demonstrated this already, but home is definitely there, office is definitely there. Mobile will have to be undefined due to the index signature. So what we're seeing here is declaration merging.
>> Mike North: And we're seeing that we can stack indexes on top of other things. The last thing I wanna point out about interfaces loops back to the type alias discussion we were having earlier.
[00:02:20] Interfaces are kind of like functions, they're parsed like functions. In that, we know that an interface exists and has a particular name as we go through in parse things. But, only when we attempt to actually access it and use it will we end up figuring out what are the allowable types for this thing.
[00:02:39] So, type aliases are kind of sorted out eagerly, interfaces are sorted out lazily. So if we were to go up here to our first example, and we were to say, we were to try to figure out a way to make this type work. If we were just gonna say, interface number array and I'm gonna cheat a little bit here,
[00:03:09]
>> Mike North: Extends.
>> Mike North: And array of numVals, semicolon, now this ends up working, why? Because this is kind of like, just like a function that's hoisted so we can refer to it before it's used or before it's defined. Numval, by the time we go through and sort this out, this is actually happy, it's an interface now.
[00:03:38] Until we get down here and sort out all of this, we don't necessarily know what this interface can hold. But at least we can refer to it and use it as part of the definition for the type alias. So you can create things that are sort of hierarchical types, self-reverential types.
[00:03:58] Some people call this recursive types, but you can create things like this through combining types and interfaces.
>> Mike North: Let's make sure I'm not lying.
>> Mike North: Looks good, let's try this.
>> Mike North: Looks good.
>> Mike North: Four makes it unhappy. So it can hold our nested arrays, it can hold the simple values we're interested in, everything looks copacetic.
[00:04:30]
>> Mike North: So that's, hopefully now you understand the difference between these two. Type aliases are eager, interfaces are lazy. Type aliases are extremely flexible, they literally can give a name to any type, anything you would use as the type of variable fits in a type alias. Interfaces or what you would wanna use for things that are objects which includes functions and includes arrays.
[00:04:53] when I say things that are sub-types of object I mean in the JavaScript sense. Things that are immutable things, right? Everything except the primitive like string, number, bully, and symbol and the undefined