Table of contents
1.
Introduction
2.
What is TypeScript Map?
3.
Map creation in TypeScript
4.
Map methods in TypeScript
5.
Example
6.
Iterating Map Data in TypeScript
7.
Frequently Asked Questions
7.1.
What is a map in TypeScript?
7.2.
Is TypeScript Map a HashMap?
7.3.
What is the map() method used for?
7.4.
What is a map file in TypeScript?
8.
Conclusion
Last Updated: Jan 16, 2025
Easy

TypeScript Map

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

TypeScript, a superset of JavaScript, brings robust typing to web development, enhancing code quality and maintainability. Among its powerful features is the Map object, a versatile data structure that allows you to store key-value pairs and efficiently retrieve values. Unlike plain JavaScript objects, Map maintains the insertion order of keys and permits keys of any type, providing greater flexibility and performance benefits for complex applications.

In this blog, we'll delve into TypeScript's Map object.

TypeScript Map (with Examples)

What is TypeScript Map?

In the ES6 version of Javascript, a new data structure called TypeScript map was included. Maps allow us to store data in a key-value pair while also remembering the keys' order was inserted, similar to other programming languages. In the TypeScript map, we can use any value as a key or value.

Map creation in TypeScript

To make a map in TypeScript, use the Map type and the new keyword.

Empty map:

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

 

Pass the key-value pairs as an array to the Map constructor to create a Map with initial key-value pairs.

let myMap = new Map<string, string>([
        ["key1", "value1"],
        ["key2", "value2"]
    ]);

Map methods in TypeScript

The TypeScript map methods are listed below.

S No.MethodDescription
1map.set(key, value)adds a new entry in the Map.
2map.get(key)retrieves the value for a given key from the Map.
3map.has(key)checks if a key is present in the Map. Returns true or false.
4map.delete(key)deletes a key-value pair using its key. If key is found and deleted, it returns true, else returns false
5map.size()returns the count of entries in the Map.
6map.clear()deletes all entries from the Map

 

Example

Below is an example code for the above mentioned methods in maps in TypeScript:

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

 
//1. Add entries
nameAgeMapping.set("Priyanka", 37);
nameAgeMapping.set("Vaishnavi", 35);
nameAgeMapping.set("Toohina", 40);

 
//2. Get entries
let age = nameAgeMapping.get("Toohina");
console.log(age); // age = 40

 
//3. Check entry by Key
console.log(nameAgeMapping.has("Priyanka"));         // true
console.log(nameAgeMapping.has("Pakhi"));         // false

 
//4. Size of the Map
let count = nameAgeMapping.size; 
console.log( count);         // count = 3

 
//5. Delete an entry
let isDeleted = nameAgeMapping.delete("Priyanka");
console.log(isDeleted) ;        //isDeleted = true

 
//6. Clear whole Map
nameAgeMapping.clear(); //Clear all entries

 

Output:

output

Iterating Map Data in TypeScript

In the insertion sequence, the Map entries iterate. We can iterate over map keys, values, or entries using the 'for-each' loop. A for-each loop returns an array of [key, value] pairs for each iteration.

The following methods are used to iterate a map:

  1. map.keys() – used to iterate over map keys
  2. map.values() – used to iterate over map values
  3. map.entries() – used to iterate over map entries
  4. map – use object destructuring to iterate over map entries

 

The following example will show how a map is iterated in TypeScript:

let nameAgeMapping = new Map<string, number>();
 
nameAgeMapping.set("Priyanka", 37);
nameAgeMapping.set("Vaishnavi", 35);
nameAgeMapping.set("Toohina", 40);

 
//1. Iterating over map keys

 
for (let key of nameAgeMapping.keys()) {
    console.log(key);                   //Priyanka Vaishnavi Toohina
}

 
//2. Iterating over map values
for (let value of nameAgeMapping.values()) {
    console.log(value);                 //37 35 40
}

 
//3. Iterating over map entries
for (let entry of nameAgeMapping.entries()) {
    console.log(entry[0], entry[1]);    //"Priyanka" 37 "Vaishnavi" 35 "Toohina" 40
}

 
//4. Use object destructuring
for (let [key, value] of nameAgeMapping) {
    console.log(key, value);            //"Priyanka " 37 "Vaishnavi" 35 "Toohina" 40
}

 

Output:

output

Frequently Asked Questions

What is a map in TypeScript?

In ES6, a new data structure called TypeScript Map was introduced. A Map is comparable to other programming languages' maps, such as Java HashMap, in that it may store key-value pairs (i.e., entries). We can iterate through Map's keys and values because it is a collection with a size and order.

Is TypeScript Map a HashMap?

Yes, TypeScript's Map is similar to a HashMap, storing key-value pairs with unique keys and offering fast lookups and updates.

What is the map() method used for?

The map() method creates a new array by applying a provided function to every element of an existing array, without modifying the original.

What is a map file in TypeScript?

A TypeScript map file (.map) links compiled JavaScript code to the original TypeScript source, aiding in debugging by preserving source code references.

Conclusion

In the ES6 version of JavaScript, a new data structure called TypeScript map was included. Maps allow us to store data in a key-value pair while also remembering the keys' order was inserted, similar to other programming languages.

Recommended Reading: 

Types of information system

To make a map in TypeScript, use the Map type and the new keyword. We can iterate over map keys, values, or entries using the 'for-each' loop. For more blogs on TypeScript head to the following link.

Live masterclass