How do I create a custom array? Archives - Tech Insights Unveiling Tomorrow's Tech Today, Where Innovation Meets Insight Tue, 12 Sep 2023 07:29:30 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.2 https://i0.wp.com/reactconf.org/wp-content/uploads/2023/11/cropped-reactconf.png?fit=32%2C32&ssl=1 How do I create a custom array? Archives - Tech Insights 32 32 230003556 How to Create a TypeScript Map https://reactconf.org/how-to-create-a-typescript-map/ https://reactconf.org/how-to-create-a-typescript-map/#respond Tue, 12 Sep 2023 07:29:30 +0000 https://labpys.com/?p=1635 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 …

The post How to Create a TypeScript Map appeared first on Tech Insights.

]]>
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.

MethodsDescription
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

The post How to Create a TypeScript Map appeared first on Tech Insights.

]]>
https://reactconf.org/how-to-create-a-typescript-map/feed/ 0 1635