Destructuring (ES6)

[RyanCavanaugh]

Example

var [x,y] = myFun();

Codegen

var __a = myFun(); // fresh var __a
var x = __a[0];
var y = __a[1];

Type annotations

// {x: myX} is a ES6 destructuring with renaming, this looks awkward
var {x: myX: number, y: myY: number} = myPoint();
// Moving type annotation to beside destructuring left hand side
var {x: myX, y: myY}: {x: ...; y: ...} = myPoint();

[RyanCavanaugh]

Paging @danquirk for proposal

[danquirk]

Work In Progress:

Destructuring Homogeneous Arrays

For cases with homogeneous arrays destructuring is quite simple and the type system can treat the results essentially as the equivalent desugared form.

// Example
function foo { return [1, 2]; }
var [x,y] = foo();

// Codegen
var __a = foo(); // fresh var __a
var x = __a[0];
var y = __a[1];

More examples of this sort will follow at the end.

Destructuring Hetergeneous Arrays as Tuples

This is the more interesting and complicated set of cases for destructuring. How do we make this work nicely? How do we surface any proposal into a .d.ts?

function returnMultipleValues { return [1, "a"]; } // return type is {}[]
var [x,y] = returnMultipleValues();

If x and y are treated just as the desugared form then x and y will have the type {} which is not very useful. We would need arrays to carry some additional type information about their individual element types in a way that still behaves in a backwards compatible fashion.

Proposal: Arrays with Element Type Information

var xs = [1, "a"]; 
// type is {}[number, string] 
// equivalent to {}[number, string, {}. {}. ...]

Leads to:

var xs = returnMultipleValues();
var x = xs[0]; // number
var y = xs[1]; // string
var z = xs[2]; // {}, would be nice to be able to give an error

But these would not check element types and still be allowed (as it is today):

xs = ["oh", "no"]; // assign string[] to {}[]
xs = [];

Issues

var xs = returnMultipleValues(); // returns {}[number, string]
var i = 0;
var x = xs[i]; // {} unless you have data flow analysis support
var y = xs[0]; // number
x = y; // ok
y = x; // error
xs[0] = 2; // error, BREAKING CHANGE

Possible Solution: Only use array element types when processing destructuring patterns, never at other times.

Proposal: Syntax for Tuple Types

Pros:

• Can give static errors for accessing outside the bounds of the tuple instead of behaving like an array and returning {} for those additional elements
• Explicit, distinct from arrays

Cons

• Doesn't play nicely with existing JavaScript

Examples

Some examples from http://fitzgeraldnick.com/weblog/50/

• how do type annotations work in LHS of destructuring assignment? (see initial post for 2 options)
• interface/class instances are just destructured like an object pattern?
• do default values work with object pattern? should be basically the same as array pattern
• is destructuring allowed in function param position? if not can we just do it anyway?
• module import destructuring allowed?

/* Example 1 */
var xs = [1, 2];
var [x, y] = xs;

// ES5 Codegen
var __xs = xs; // fresh var
var x = __xs[0];
var y = __xs[1];



/* Example 2 */
// nested destructuring
var [foo, [[bar], baz]] = [1, [[2], 3]];

// ES5 Codegen
var __xs = [1, [[2], 3]];
var foo = __xs[0];
var bar = __xs[1][0];
var baz = __xs[1][1];



/* Example 3 */
// skipping elements
var [, , third] = ["foo", "bar", "baz"];

// ES5 Codegen
var __xs = ["foo", "bar", "baz"];
var third = __xs[2];



/* Example 4 */
// using rest pattern
var [head, ...tail] = [1, 2, 3, 4];

// ES5 Codegen
var __xs = [1, 2, 3, 4];
var head = __xs[0];
// TODO: too slow?
var tail = __xs.slice(1, __xs.length - 1);



/* Example 5 */
// destructuring objects
var robotA = { name: "Bender" };
var robotB = { name: "Flexo" };

var { name: nameA } = robotA;
var { name: nameB } = robotB;

// ES5 Codegen
var __robotA = { name: "Bender" }; // fresh vars
var __robotB = { name: "Flexo" };

var nameA = __robotA.name;
var nameB = __robotB.name;



/* Example 6 */
// property and var names the same
var { foo, bar } = { foo: "lorem", bar: "ipsum" };

// ES5 Codegen
var __a = { foo: "lorem", bar: "ipsum" };
var foo = __a.foo;
var bar = __a.bar;



/* Example 7 */
// complicated object destructuring
var complicatedObj = {
    arrayProp: [
        "Zapp",
        { second: "Brannigan" }
    ]
};

var { arrayProp: [first, { second }] } = complicatedObj;

//ES5 Codegen
var __b = complicatedObj;
var arrayProp = __b.arrayProp;
var first = arrayProp[0];
var second = arrayProp[1].second;



/* Example 8 */
// default values
var [missing = true] = [];

// ES5 codegen
var __c = [];
var missing = __c ? __c : true;



/* Example 9 */
// destructuring in function params
function removeBreakpoint({ url, line, column }) { }

// ES5 codegen
function removeBreakpoint(__a) {
    var url = __a.url;
    var line = __a.url;
    var column = __a.url;
}



/* Example 10 */
// for loop var
for (let[key, value] of map) {
    console.log(key + " is " + value);
}

// ES5 codegen
for(let __a of map) {
    let key = __a.key;
    let value = __a.key;
}



/* Example 11 */
function returnMultipleValues() {
    return [1, 2];
}
var [foo, bar] = returnMultipleValues();

// ES5 codegen
// multiple function return values in array
var __a = returnMultipleValues(); // fresh var
var foo = __a[0];
var bar = __a[1];



/* Example 12 */
function returnMultipleValues2() {
    return { x: 1, y: 2 }
}
var [foo, bar] = returnMultipleValues2();

// ES5 codegen
// multiple function return values in array
var __a = returnMultipleValues(); // fresh var
var foo = __a.foo;
var bar = __a.bar;



/* Example 13 */
// assignment only destructuring
({ safe }) = {};

// ES5 codegen
var __a = {};
safe = __a;



/* Example 14 */
// module destructuring
const { SourceMapConsumer, SourceNode } = require("source-map");

// TODO: larger item with modules, maybe not even allowed anymore?



/* Example 15 */
interface I {
    foo: string;
    bar: number;
}

var i: I = { foo: '', bar: 2 }
var { foo, bar } = i;

// ES5 Codegen
var __a = i;
var foo = __a.foo;
var bar = __a.bar;

[Arnavion]

Is example 8 supposed to use the ternary operator's truthiness or is it supposed to check specifically for undefined / hasOwnProperty()? Granted, I can't find anything in the harmony proposal nor MDN, and while FF Nightly does support destructuring assignment it doesn't support default values.

[RyanCavanaugh]

See also #428

[basarat]

👍

[eggers]

+1

[fdecampredon]

For syntax of type annotations I would prefer the first option :

var {x: myX: number, y: myY: number} = myPoint(); // with renaming
var {x:: number, y:: number} = myPoint(); // without renaming

than having over verbose syntax that force us to repeat the var names, especially for function arguments destructuring.

function myFunc({x::number, y::number }) {
}

Seems a lot easier to read for me than :

function myFunc({x, y}: {x: number; y: number}) {
}

[basarat]

Test required : does it work with import :

import {each, map} = require('underscore');

Asked on SO: http://stackoverflow.com/questions/27453272/destructuring-external-modules-in-typescript/27465804#27465804

[Arnavion]

Per the ES6 spec, example 8 should be as follows:

/* Example 8 */
// default values
var [missing = true] = [];

// ES5 codegen
var __c = [];
var __c0 = __c[0];
var missing = (__c0 === undefined) ? __c0 : true;

Note that __c[0] is to be accessed only once and thus has to be lifted to a temporary, and that the default value is assigned only if the actual value is undefined.

Example 2 also has the same problem of accessing xs[1] more than once. Example 7 gets it right.

Edit: I see Ander's PR does this correctly already.

---

Lastly, the spec defines destructuring in terms of iterators, so:

var arr = [1, 2];
arr[Symbol.iterator] = function* () { yield "5"; }
arr[0]; // Still 1
arr[1]; // Still 2
var [foo, bar] = arr; // foo = "5", bar = undefined

The ES5 codegen that simply indexes into the array will give wrong results. TS can't really be expected to cope with this. This is only a problem for the ES5 codegen and one can say that Iterators aren't in ES5, so this is a caveat the user must be aware of if they choose to run the ES5 codegen in an environment that supports Iterators.

Even in ES6 codegen that leaves the destructuring assignment syntax unchanged, this is still a problem for the typechecker - it will infer foo and bar to be numbers but the actual iterator returns a string and undefined. To prevent this, the typechecker should validate that the Array<T>[Symbol.iterator] method only yields values of type T if overridden.