Support proposed ES Rest/Spread properties

[fdecampredon]

es7 proposal : https://github.com/sebmarkbage/ecmascript-rest-spread

Spread properties

Typing

In my opinion the goal of this method is to be able to duplicate an object and changing some props, so I think it's particularly important in this case to not check duplicate property declaration :

var obj = { x: 1, y: 2};
var obj1 = {...obj, z: 3, y: 4}; // not an error

I have a very naive type check algorithm for a similar feature (JSXSpreadAttribute) in my little jsx-typescript fork: I just copy the properties of the spread object in the properties table when I encounter a spread object, and override those property if I encounter a declaration with a similar name.

Emitting

jstransform use Object.assign, babel introduce a shim:

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

We could either force the presence of assign function on ObjectConstructor interface, or provide a similar function (with a different name).

I think that the optimal solution would be to not emit any helper in es6 target (or if Object.assign is defined), and to emit an helper function for es5, es3.

var obj = { x: 1, y: 2};
var obj1 = {...obj, z: 3};

/// ES6 emit
var obj = {x: 1, y: 2};
var obj1= Object.assign({}, obj, { z: 3 });

//ES3 emit
var __assign = function (target) { 
 for (var i = 1; i < arguments.length; i++) { 
 var source = arguments[i]; 
 for (var key in source) { 
 if (Object.prototype.hasOwnProperty.call(source, key)) { 
 target[key] = source[key];
 } 
 } 
 } 
 return target; 
};

var obj = {x: 1, y: 2};
var obj1= __assign({}, obj, { z: 3 });

Rest properties

Typing

For simple object the new type is a subtype of the assignation that does not contains properties that has been captured before the rest properties :

var obj = {x:1, y: 1, z: 1};
var {z, ...obj1} = obj;
obj1// {x: number; y:number};

If the destructuring assignment has an index declaration, the result has also a similar index declaration:

var obj: { [string: string]: string };
var {[excludedId], ...obj1} = obj;
obj1// { [string: string]: string };

new/call declarations are obviously not captured:

var obj: { (): void; property: string};
var { ...obj1} = obj;
obj1// { property: string };

Emitting

It is not possible to emit rest properties without an helper function, this one is from babel:

var obj = {x:1, y: 1, z: 1};
var {z, ...obj1} = obj;

var __objectWithoutProperties = function(obj, keys) {
 var target = {};
 for (var i in obj) {
 if (keys.indexOf(i) >= 0) continue;
 if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
 target[i] = obj[i];
 }
 return target;
};

var obj = {x:1, y: 1, z: 1};
var z = obj.z;
var obj1 = __objectWithoutProperties(obj, ["z"]);

Edit: added some little typing/emitting example

[RyanCavanaugh]

We'd probably need some examples of how this could plausibly be emitted in downlevel (if that's in scope).

[fdecampredon]

Ryan Cavanaugh (@RyanCavanaugh), I added some little emitting example and typing idea.
I would like to work on that one since anyway it's more or less a jsx feature and I will need to add it to my fork, but if it's added to typescript core it's better ^^.

[mnpenner]

I recently discovered this feature in ES7 via this article. I have to say, it's quite handy!

Would love to see this in TypeScript!

[prabirshrestha]

Any updates on this? Would love to see this in 1.6 as it would come super handy when using with React 😄

[DanielRosenwasser]

Prabir Shrestha (@prabirshrestha) for the record, we currently have the property spread operator for JSX on master.

[mnpenner]

Daniel Rosenwasser (@DanielRosenwasser) Could you elaborate? Does that mean this works on master with the --jsx flag? Does that include rest properties or just spread properties?

[DanielRosenwasser]

Sorry Mark Penner (@mnpenner) and Prabir Shrestha (@prabirshrestha), yes, I meant on master. Ryan Cavanaugh (@RyanCavanaugh) knows more about this than I do, but I believe it's just spread properties.

[RyanCavanaugh]

JSX supports spread attributes, e.g. <TagName {...spreadedExpr} />. Nothing to do with the ES6 spread operator other than sharing the same token and having roughly equivalent semantics.

[RichiCoder1]

I'm very interested in both Redux and React, the manipulation in state is made much easier with this. Would love to see this implemented.

[Lenne231]

Rest/Spread is approved for Stage 2 now https://github.com/tc39/tc39-notes/blob/master/es7/2015-07/july-30.md