TypeScript Fundamentals

TypeScript Fundamentals Rest and Spread Properties


This course has been updated! We now recommend you take the TypeScript Fundamentals, v3 course.

Check out a free preview of the full TypeScript Fundamentals course:
The "Rest and Spread Properties" Lesson is part of the full, TypeScript Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

After discussing that rest properties collect the remaining enumerable property keys that are not already picked off by the destructuring pattern, Mike reviews spread properties, which copies their own enumerable properties from a provided object onto a newly created object.

Get Unlimited Access Now

Transcript from the "Rest and Spread Properties" Lesson

>> Mike North: In addition to this, so in TypeScript, this has existed for a while. I showed this up here cuz it's not technically in JavaScript yet, it is progressing along nicely. TypeScript has enjoyed this for a long time, object rest and spread properties. And in both cases, we're looking at ellipses, right?

[00:00:21] This dot, dot, dot. So the way I think about rest and the way I remember which is rest versus spread, I just remember the phrase, and the rest go here. So in this case, if we've got a variable called data and it's got X, Y, and Z. And then on the left side of the assignment operator, and say let x =, sorry.

[00:00:47] Let, and then we're destructuring we're saying, we wanna grab x and then the rest go here. Right, so in that situation when we log that out. We're gonna see that on that first line here, we get y and z. So we're basically saying all right, this data thing on the right I wanna capture x by name and then put the rest in others.

[00:01:11] So, everyone understand how that works? It's almost like a catch all, catch the rest here. Spread, you know that, so that's gonna be on the right side of the assignment operator. And you've gotta think of that as almost like taking the object, and spreading it out. So we've got others, and we're gonna add to it, a and b.

[00:01:31] And you can see that, that's the second line that gets logged out here. And it's sort of like unpacking the object, like unzipping it and spreading it out. So no, we do not have it's not like we have this object others with y and z, nested inside this second line.

[00:01:47] It is unpacked and it's property has become the properties of the enclosing object in which it is spread. Does that make sense to everyone? So this can be done in regular JavaScript now with arrays. This stage three proposal is and current type script feature pertains to working with objects as well in exactly the same way.

[00:02:13] So, in particular when we deal with arrays, this is kinda nice cuz you can have arguments, like an arguments object. And when you're using apply you can just do like dot dot dot argument. Instead of having to pass it in, and it will spread that array out into the very slots of arguments for that function, and sort of passing the array as one value.

[00:02:36] Pretty cool stuff, and you will know it, so now that we've seen this, I wanna go back to one of the solution I just did. To show you how we can get away from some evil type casting that we did. So type casting is something you want to avoid because you're basically saying, you're like type scripts trying to tell you something.

[00:02:55] She said, type casting, you should only do it when necessary. And you're basically saying, I wish to disregard the warning that you're giving me type system. I am over ruling you. And in this case, we had to do stuff like creating a new value as a confirmed user here.

[00:03:16] I showed you this before, but now that we know what spread does, I just wanna show you. This should be something that you try to get rid of if you can, right. You try to try to not have to do this. So if we were to say, i'm gonna change toConfirm

>> Mike North: Move it back to userToApprove.
>> Mike North: And now it's gonna be complaining that like you told me you'd return a confirmed user and this is just a user. And we can get rid of this, it adds no value at this point. We can simply say, here, I wanna take the userToApprove.

>> Mike North: And give it, I want to return an object that contains the properties of that, but also is active, and now it's happy. Now I have all the properties I need. I am not casting, which means, there isn't any chance I am going to get a value and basically you are just sort of beating typescript into submission now.

[00:04:23] Typescript and I agree that this is okay. And same down here, I could say, new Admin. When you hit F2 to change it back to user, that means we don't need this, and same goes here. User, adminSince, new Date, and this will be happy with me. So we got rid of those two casts and now we have no type casting in this whole file, which is great.

[00:04:59] What that means is, we have to find out types and those pertain to certain structures. And we're just simply returning the right structures and type scripts saying thumbs up. Yes you are, good job. And we're not simply saying, whatever this is could be a string. Whatever it is, you must regard it as this other thing.

[00:05:22] Anytime we do that, we're taking on a risk. We have to be sure that we're right. Now we don't have to be sure. Now Type Script is telling us that we're fine. So everyone understand how this is a step up from what we did before. The thing of type casting almost as like the equivalent of in CSS using bang important where you're just saying, no damn it, like you are displaying none.

[00:05:44] Whatever rules you have like I hereby supercede, so that is the better approach to take. And this is great, particularly when you're dealing with structural typing, where you have like one type that extends another. You can sort of just spread the smaller shape out into the bigger shape and define other properties.

[00:06:08] Does everyone understand what I mean by smaller and bigger shape? Bigger shape has more properties than the smaller one, superset of the smaller one.