How to merge Maps in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 9, 2022

banner

Photo from Unsplash

Merge Maps in TypeScript #

To merge Maps in TypeScript:

  1. Explicitly type the keys and values of the third Map.
  2. Use the spread syntax (...) to unpack the key-value pairs of the first two Maps.
  3. The types of the keys and values of the Maps have to match.
index.ts
const map1 = new Map([['country', 'Germany']]); const map2 = new Map([['salary', 100]]); const map3 = new Map<string, string | number>([...map1, ...map2]); // 👇️ {'country' => 'Germany', 'salary' => 100} console.log(map3);

We used a generic to type the keys and values of the third Map object.

We could have done the same for the first two Maps, however it was not needed, because TypeScript was able to infer the type based on the passed in values.

The following code snippet achieves the same result.

index.ts
const map1 = new Map<string, string>([['country', 'Germany']]); const map2 = new Map<string, number>([['salary', 100]]); const map3 = new Map<string, string | number>([...map1, ...map2]); // 👇️ {'country' => 'Germany', 'salary' => 100} console.log(map3);

The first Map has keys of type string and values of type string.

The second Map has keys of type string and values of type number.

When merging the Maps, we have to make sure the type of the third Map conforms with the types of the other two.

The example shows how we had to use a union type to set the values of the third map to be strings or numbers.

We used the spread operator (...) to unpack the key-value pairs from 2 Map objects into an array.

index.ts
const map1 = new Map<string, string>([['country', 'Germany']]); // 👇️ [ ['country', 'Germany'] ] console.log([...map1]);

The array contains nested arrays consisting of key-value pairs.

The last step is to pass the array to the Map() constructor, which takes an iterable as a parameter.

With the values in place, the example looks like:

index.ts
const map3 = new Map<string, string | number>([ ['country', 'Germany'], ['salary', 100], ]);

The iterable, the Map takes must consist of key-value pairs, e.g. a two dimensional array or another Map object.

This process could be repeated with as many Map objects as necessary, as long as the type of the final Map conforms with the types of the other Maps.

index.ts
const map1 = new Map<string, string>([['country', 'Germany']]); const map2 = new Map<string, number>([['salary', 100]]); const map3 = new Map<string, boolean>([['isProgrammer', true]]); const map4 = new Map<string, string | number | boolean>([ ...map1, ...map2, ...map3, ]);

The type of the values in the fourth Map has to be compatible with the type of the values in all other Maps.

Note that the insertion order of keys is preserved. If you need to re-order the key-value pairs, simply switch the order in which the spread operator (...) is used.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.