请在TypeScript中解释…运算符

Question

the following tutorial ( https://dojo.io/tutorials/1010_containers_and_injecting_state/ ) contains the code snippet:

which I don't understand and never saw before. It looks a little bit the "rest parameters" from TypeScript. What exactly does the "..." mean? Is there somewhere a documentation? I could not find anything.

Answer 1

This is the spread operator . It essentially unwraps an object / array you are spreading and puts all of the properties where the spread operator is. A very simple example for objects:

const a = { foo: 'bar' };
const b = { ...a };

This "spreads" the properties of a inside of the object literal. So think of it as doing two steps: take all properties:

{ { foo: 'bar' } }

...and remove the object wrapper:

{ foo: 'bar' }

The result is that a is equivalent to b .

You can use this to copy properties into objects and set defaults

const a = { a: 1, b: 2 };
const b = { a: 2, c: 3 };
const c = { a: 0, z: 4, ...a, ...b };

c will be { a: 2, z: 4, b: 2, c: 3 } . We can do this in two steps again:

{ a: 0, z: 4, { a: 1, b: 2 }, { a: 2, c: 3 } }

Now unwrap the inner objects:

{ a: 0, z: 4, a: 1, b: 2, a: 2, c: 3 }

The last time a property was declared takes precedence, so remove a: 0 and a: 1 .

You can do this with arrays too and it works the same:

const a = [2, 3];
const b = [1, ...a];

This will be [1, 2, 3] . Doing the steps:

[1, [2, 3] ]

Then unwrap the inner array to get [1, 2, 3] .

Note that when you unwrap you need to unwrap into something, so doing:

const a = [1, 2, 3]
const b = ...a

This isn't allowed because we can't have b = 1, 2, 3 -- that's just not valid syntax. However, it does work for function arguments with arrays.