TypeScript - spread operator (...)

In this article, we would like to show you how works spread operator in TypeScript.

The spread operator allows you to spread the iterated value into its components.

Usage examples:

1. Breaking an array into individual elements:

const array: number[] = [1, 2, 3, 4, 5];
console.log(...array); // 1, 2, 3, 4, 5

const text: string = 'Dirask';
console.log(...text); // D, i, r, a, s, k

Output:

1 2 3 4 5
D i r a s k

2. Copying an array:

const array: number[] = [1, 2, 3, 4, 5];
const array2: number[] = [...array];

console.log(array2);

Output:

[ 1, 2, 3, 4, 5 ]

3. Combine arrays:

const array1: number[] = [2, 3, 4];
const array2: number[] = [1, ...array1, 5, 6, 7];

console.log(array2); // 1, 2, 3, 4, 5, 6, 7

Output:
 

[ 1, 2, 3, 4, 5, 6, 7 ]

4. Math object. 

Functions like Math.max() expect many parameters. We can't pass the array as one argument there, so we can use the spread operator.

const array: number[] = [1, 2, 3, 4];

console.log(Math.max(1, 2, 3, 4)); // 4
console.log(Math.max(...array));   // 4

Output:

4

5. Spread operator with objects

Example 1

const object1 = {
  x: 5,
  y: 7,
};

const object2 = {
  y: 11,
  z: 23,
};

const object3 = {
  k: 33,
  ...object1,
  ...object2,
};

console.log(object3); // { k: 33, x: 5, y: 11, z: 23 }

Note:

As we can see above, the order does matter - y value from object1 has been overwritten by value from object2.

Example 2

const object1: Record<string, number> = {
  x: 5,
  y: 7,
};

const object2: Record<string, number> = {
  y: 11,
  z: 23,
};

const object3: Record<string, number> = {
  k: 33,
  ...object1,
  ...object2,
};

console.log(object3); // { k: 33, x: 5, y: 11, z: 23 }

Example 3

interface Object1 {
  x: number;
  y: number;
}

interface Object2 {
  y: number;
  z: number;
}

interface Object3 extends Object1, Object2 {
  k: number;
}

const object1: Object1 = {
  x: 5,
  y: 7,
};

const object2: Object2 = {
  y: 11,
  z: 23,
};

const object3: Object3 = {
  k: 33,
  ...object1,
  ...object2,
};

console.log(object3); // { k: 33, x: 5, y: 11, z: 23 }

Example 4

type Object1 = {
  x: number;
  y: number;
};

type Object2 = {
  y: number;
  z: number;
};

type Object3 = Object1 | Object2 | {
  k: number;
};

const object1: Object1 = {
  x: 5,
  y: 7,
};

const object2: Object2 = {
  y: 11,
  z: 23,
};

const object3: Object3 = {
  k: 33,
  ...object1,
  ...object2,
};

console.log(object3); // { k: 33, x: 5, y: 11, z: 23 }