Map in TypeScript
In this post, you will learn about the Map in TypeScript.
Map is a new data-structure. Map object is provided by ES6 so it is available to JavaScript as well as TypeScript.
In the development process, we often need a data structure to hold a mapping of key/value pairs. Map allows us to store data in a key-value pair similar to maps in other programming languages. Map is a collection of elements where each element is stored as a key, value pair. We can iterate over its keys and values.
Create map in TypeScript
To create a map in TypeScript, we use the Map type with a new keyword.
Syntax-var map = new Map<string, number>();
To create a map with key-value pairs, pass the key-value pairs as an array to the Map() constructor.
var map = new Map<string, string | number>([
["key1", "value1"],
["key2", "value2"]
]);
Example-
const emp = new Map<string, string | number>([
['name', 'Smith'],
['age', 35],
['dept', 'IT'],
]);
TypeScript Map methods
These are the following TypeScript methods-
Methods | Descriptions |
map.set(key, value) | It adds a new entry in the map. |
map.get(key) | It retrieves the value of the given key from the map. |
map.has(key) | It returns true if the key is present in the map. Otherwise, it returns false. |
map.delete(key) | It removes a key-value pair by the given key. |
map.size() | It returns the size of the map. |
map.clear() | It removes everything from the map. |
TypeScript Map Add Element
const emp = new Map<string, number|string>();
// Add employee entries
emp.set("Smith", 37);
emp.set("Paul", 35);
emp.set("John", 40);
emp.set("Andy", 38);
TypeScript Map Get Element
const emp = new Map<string, number|string>();
// Add employee entries
emp.set("Smith", 37);
emp.set("Paul", 35);
emp.set("John", 40);
emp.set("Andy", 38);
// Get entry
let age = emp.get("John");
console.log("Age : " +age);
Output of the above code:
Age : 40
TypeScript Map Delete Element
const emp = new Map<string, number|string>();
emp.set("Smith", 37);
emp.set("Paul", 35);
emp.set("John", 40);
emp.set("Andy", 38);
// Delete entry
let isDeleted = emp.delete("John");
console.log(isDeleted )
Output of the above code:
true
TypeScript Clear a Map
const emp = new Map<string, number|string>();
emp.set("Smith", 37);
emp.set("Paul", 35);
emp.set("John", 40);
emp.set("Andy", 38);
// Clear entries
emp.clear();
TypeScript Iterating Over Map
The forEach() method loops through the array and executes the callback function for each element. The forEach() method can also be used on Maps.
const emp = new Map<string, number|string>();
// Set employee entries
emp.set("Smith", 37);
emp.set("Paul", 35);
emp.set("John", 40);
emp.set("Andy", 38);
emp.set("Andrew", 41);
// Using forEach
console.log("\nIterate using forEach");
emp.forEach((value, key) => {
console.log(value, key);
});
// Using for...of
console.log("\nIterate using for...of");
for (const [key, value] of emp) {
console.log(key, value);
}
// Iterate over Map's keys
console.log("\nIterate over Map's keys");
for (const key of emp.keys()) {
console.log(key);
}
// Iterate over Map's values
console.log("\nIterate over Map's values");
for (const value of emp.values()) {
console.log(value);
}
Output of the above code:
Iterate using forEach
37 Smith
35 Paul
40 John
38 Andy
41 Andrew
Iterate using for...of
Smith 37
Paul 35
John 40
Andy 38
Andrew 41
Iterate over Map's keys
Smith
Paul
John
Andy
Andrew
Iterate over Map's values
37
35
40
38
41
Related Articles
Generate random numbers in JavaScriptJavascript window location
Remove duplicates from array Javascript
Scientific calculator JavaScript
How to reverse string in JavaScript
JavaScript display PDF in the browser using Ajax call
Parsing JSON in Javascript
Javascript speech recognition example
Select/deselect all checkboxes using Javascript
Print specific part of a web page in javascript
Dynamically Add/Delete HTML Table Rows Using Javascript
jQuery Ajax serialize form data example
Image popup on page load using HTML and jQuery
Ajax live data search using jQuery PHP MySQL
jQuery loop over JSON result after AJAX Success
Simple star rating system using PHP, jQuery and Ajax
jquery image zoom on mouseover example
Bootstrap star rating input example
Bootstrap datepicker example
Submit a form data without page refresh