TypeScript Map is a new data structure that allows us to store data in the key-value pair and remembers the original insertion order of the keys. It is a new feature of ECMAScript 6 (ES6) that provides advantages over plain JavaScript objects.
How to create a Map in TypeScript
You can create a Map in TypeScript using this let myMap = new Map<string, number>(); syntax.
let xmap = new Map();To set a key value in the map, use the map.set() function.
let xmap = new Map();
xmap.set('name', 'Krunal');
console.log(xmap);Go to the terminal where this file is and run the following command.
tsc --target es6 app.tsIf we don’t add the –target flag, we will get an error because it won’t be compatible with ES6. So, we have to add this flag to avoid any errors.
After running the command, you will see the new file is created called app.js, and now run that file to get the output.
Map(1) { 'name' => 'Krunal' }Example
let xmap = new Map();
xmap.set('name', 'Krunal');
xmap.set('blog', 'https://appdividend.com');
xmap.set('boolean', true);
xmap.set('age', 27);
console.log("1st value: " + xmap.get('name'));
console.log("2nd value: " + xmap.get('blog'));
console.log("Key 'yes' is Present: " + xmap.has('yes'));
console.log("The size of Map is: " + xmap.size);
console.log("The deleted value: " + xmap.delete('boolean'));
console.log("The New Size is: " + xmap.size);To run the file, type the following commands.
➜ es git:(master) ✗ tsc --target es6 app.ts
➜ es git:(master) ✗ node app
1st value: Krunal
2nd value: https://appdividend.com
Key 'yes' is Present: false
The size of Map is: 4
The deleted value: true
The New Size is: 3In this example, we first defined 4 key-value pairs and then used different methods to get the values, check if the key exists in the map, the map size, and remove the key from the map.
How to iterate Map Data in TypeScript
To iterate map keys or values in TypeScript, use the “for…of” loop.
let xmap = new Map();
xmap.set('name', 'Krunal');
xmap.set('blog', 'https://appdividend.com');
xmap.set('boolean', true);
xmap.set('age', 27);
// Iterate over map keys
console.log('Iterating keys: ')
for (let key of xmap.keys()) {
console.log("Map Keys= " + key);
}
// Iterate over map values
console.log('----------------');
console.log('Iterating values: ')
for (let value of xmap.values()) {
console.log("Map Values= " + value);
}
Output
➜ es git:(master) ✗ tsc --target es6 app.ts
➜ es git:(master) ✗ node app
Iterating keys:
Map Keys= name
Map Keys= blog
Map Keys= boolean
Map Keys= age
----------------
Iterating values:
Map Values= Krunal
Map Values= https://appdividend.com
Map Values= true
Map Values= 27In this example, we have defined 4 pairs of maps, and first, we iterated keys using the map.keys() method, and then we iterated values using the map.values() method inside for…of loop.
To iterate and display the key and values of the map in a single loop, use the map.entries() method inside the for…of loop.
let xmap = new Map();
xmap.set('name', 'Krunal');
xmap.set('blog', 'https://appdividend.com');
xmap.set('boolean', true);
xmap.set('age', 27);
// Iterate over map entries
console.log('Iterating Map Entries: ')
for (let entry of xmap.entries()) {
console.log(entry[0] + ':', entry[1]);
}
Output
➜ es git:(master) ✗ tsc --target es6 app.ts
➜ es git:(master) ✗ node app
Iterating Map Entries:
name: Krunal
blog: https://appdividend.com
boolean: true
age: 27You can see that we have displayed the data in key: value.
Map methods
| No | Methods | Descriptions |
|---|---|---|
| 1. | map.set(key, value) | The map.set() method is used to add entries to the map. |
| 2. | map.get(key) | The map.get() method retrieves entries from the map. The get() method returns undefined if the key does not exist on the map. |
| 3. | map.has(key) | The map.has() method returns true if the key is present in the map. Otherwise, it returns false. |
| 4. | map.delete(key) | The map.delete() method removes the entries by the key. |
| 5. | map.size() | The map.size() method returns the map size. |
| 6. | map.clear() | The map.clear() method removes everything from the map. |
That’s it.
This is a very useful article. I was trying to find information on the ES6 Map function and how to use it and this article explains everything very well.