How to Create a TypeScript Map

The Map is a new data structure introduced in ES6. The map allows for storing key-value entries. It is a built-in data structure in TypeScript that is similar to a JavaScript map but it has the added benefit of type checking.

In TypeScript Map class provides a type-safe way to store key-value pairs with any type of key and value.

In this article, we will learn How to Create a TypeScript Map

Create a TypeScript Map

Create a Map using the new keyword and provide the data types for keys and values.

new Map<type,type>()

To create a Map with initial key-value entries, then pass the key-value pairs as an array to the Map constructor.

let createMap = new Map<string,string>([
[“key1”,”value1”],
[“key2”,”value2”]
]);

Map Methods

To  Add, Retrieve, and  Delete Entries from the Map. These common operations are available.

Here is a Code Example:

//Creating Map
let customerMap = new Map<string, number>();

// Adding the entries
customerMap.set("Fleming", 101);
customerMap.set("Raj", 102);
customerMap.set("Astle", 103);
customerMap.set("Stuart", 104);

console.log(customerMap);
// Get entries
let custcode = customerMap.get("Raj");

console.log("customer code --" + custcode);
// checking the entry if present return true else false
customerMap.has("Astle");
customerMap.has("john");

// get the Map size
let countcollection = customerMap.size;

console.log("Map size --" +countcollection);
// remove the entry
let removekey = customerMap.delete("Stuart");
console.log('deleted -  ' + removekey);
// clear all Map entries
customerMap.clear();

console.log("clear the Map Entries --" + customerMap);

Result:

Map(4) {
  'Fleming' => 101,
  'Raj' => 102,
  'Astle' => 103,
  'Stuart' => 104
}
customer code --102
Map size --4
deleted -  true
clear the Map Entries --[object Map]

How to iterate over Map

Iterate over map keys or values by using the ‘for-each’  loop. It returns an array of key-value pairs for each iteration.

Use the ‘for..of’ loop to iterate over the map.

• Map.keys()  – to iterate over map keys
• Map.values()  – to iterate over map values
• Map.entries() – to iterate over map entries
• Map – use object destructuring to iterate over map entries.

Here is a Code Example:

let customerMap = new Map<string, number>();

customerMap.set("Fleming", 101);
customerMap.set("Raj", 102);
customerMap.set("Astle", 103);
customerMap.set("Stuart", 104);

console.log("Iterate over map keys");
for (let key of customerMap.keys())
{
    console.log(key);
}


console.log("Iterate over map values");
for (let value of customerMap.values())
{
    console.log(value);
}


console.log("Iterate over map Entries");
for (let entry of customerMap.entries())
{
    console.log(entry[0],entry[1]);
}

console.log("destructuring object");
for (let [key,value] of customerMap)
{
    console.log(key,value);
}

Create a Map Using the  “Record Utility” Type

To Create a map using “Record Utility” type. It takes two parameters, the type of the keys and the types of the values.

Syntax

Record<type,type>={};

Here is a Code Example:

//Creating a map using "Record Utility" Type:

const customer : Record<string,string>={};

// assign the value to the keys of the map

customer['Stephen'] = '1001';
customer['John'] = '1075';
customer['Nathan'] = '1120';
customer['Raj'] = '1145';


console.log(customer);

Output

{ Stephen: ‘1001’, John: ‘1075’, Nathan: ‘1120’, Raj: ‘1145’ }

More articles – Convert Enum into an Array in Typescript