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

Table of Contents

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.

Methods	Description
Map.set(key,value)	To add entries in the map
Map.get(key)	To retrieve the values for a given key from the Map.
Map.has(key)	Check if a key is present in the Map. it returns true or false.
Map.delete(key)	Remove the entries using its key. If the key is found and deleted, it returns true else returns false.
Map.clear()	delete all entries from the Map

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