Last updated: Feb 27, 2024
Reading timeยท3 min
Use the Map()
constructor to initialize a Map
in TypeScript.
The constructor takes an array containing key-value pair arrays, where the first element is the key and the second is the value.
// โ Initialize Map from Array // ๐๏ธ const map1: Map<string, string> const map1: Map<string, string> = new Map([ ['name', 'Bobby Hadz'], ['country', 'Chile'], ]); // ๐๏ธ Map(2) { 'name' => 'Bobby Hadz', 'country' => 'Chile' } console.log(map1);
The Map() constructor takes an array whose elements are key-value pairs.
Map
generic when initializing the Map is the key, and the second is the value.We created a Map
that has a key and a value of type string
in the examples.
You can use the Object.entries()
method if you need to initialize a type a
Map
using an object.
const obj = { name: 'Bobby Hadz', country: 'Chile' }; const map1 = new Map<string, string>(Object.entries(obj)); // ๐๏ธ Map(2) { 'name' => 'Bobby Hadz', 'country' => 'Chile' } console.log(map1);
The Object.entries method returns a two-dimensional array, where the nested arrays contain 2 elements - the key and the value.
const obj = { name: 'Bobby Hadz', country: 'Chile' }; // ๐๏ธ [ [ 'name', 'Bobby Hadz' ], [ 'country', 'Chile' ] ] console.log(Object.entries(obj)); // ๐๏ธ const map1: Map<string, string> const map1 = new Map<string, string>(Object.entries(obj)); // ๐๏ธ Map(2) { 'name' => 'Bobby Hadz', 'country' => 'Chile' } console.log(map1);
This is a perfect match because the Map()
constructor expects an array
containing nested arrays of key-value pairs.
Here is an example where we set the type of the keys in the Map
to string
and the type of the values to string[]
.
// ๐๏ธ const map1: Map<string, string[]> const map1: Map<string, string[]> = new Map([ ['colors', ['blue', 'red', 'green']], ['languages', ['english', 'spanish', 'german']], ]); // โ Get value from Map // ๐๏ธ ['blue', 'red', 'green'] console.log(map1.get('colors')); // โ Iterate over Map map1.forEach((value, key) => { console.log(value, key); }); // โ Check if a key exists in Map console.log(map1.has('colors')); // ๐๏ธ true // โ Set a new key in Map map1.set('countries', ['UK', 'Spain', 'Germany']);
The code snippet shows some of the methods the Map
object implements.
Now that we've set the type of the values in the Map
to string[]
, we
wouldn't be able to set a value of a different type in the Map
.
// ๐๏ธ const map1: Map<string, string[]> const map1: Map<string, string[]> = new Map([ ['colors', ['blue', 'red', 'green']], ['languages', ['english', 'spanish', 'german']], ]); // โ๏ธ Error: Argument of type 'number' is not // assignable to parameter of type 'string[]'. map1.set('age', 30);
We tried to add a new element to the Map
with a value of number and TypeScript
errored out.
Note that you don't have to add key-value pairs to a Map
when creating it.
You can initialize an empty Map
, set its type and add key-value pairs later on
in your code.
// ๐๏ธ const map1: Map<string, string[]> const map1: Map<string, string[]> = new Map([]); map1.set('colors', ['blue', 'red', 'green']); map1.set('languages', ['english', 'spanish', 'german']); // ๐๏ธ {'colors' => ['blue', 'red', 'green'], // 'languages' => ['english', 'spanish', 'german'] // } console.log(map1);
The code sample declares an empty, typed Map
that has string keys and arrays
containing strings as values.