Warning: session_start(): open(/tmp/sess_59077cc23a73609125ef8ce1728f1eb0, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Initialize And Type A Map In Typescript - LearnShareIT

How To Initialize And Type A Map In Typescript

How To Initialize And Type A Map In Typescript

Initialize and type a map in Typescript is fundamental knowledge that any Typescript developer should know. So how to do it? In this article we will help you practice it through Map object. Let’s go into detail now.

How to initialize and type a map in Typescript

Use Map object

To create a new Map object, you can use Map type and a new keyword.

Example:

let anMap= new Map<string,string>

Or you can set the type for Map before the colons symbol like this:

Example:

let anMap:Map<string,string>= new Map

Here I set the type for key-value pairs by using generics type. The first element is the key, and the second is the value. You can also initiate the value for your Map by passing the value as an array.

Example:

let anMap= new Map<string,string>([
  ['name','James'],['age','18'],['country','Japan']
])

console.log(anMap)

Output:

[LOG]: Map (3) {"name" => "James", "age" => "18", "country" => "Japan"}

The Map() constructor takes an array containing key-value pair elements. In the code above, I create three key-value pairs with the string type key-value.

The Map type will be beneficial when you want to create a date object so that you can get value based on the key and set many types for your key-value pair.

Example:

type detailInfor = {
  name: string,
  age: number,
  country: string
}

let inforMap:Map<string,detailInfor>= new Map([
  ['james',{name:'James',age:28,country:'Japan'}]
])

console.log(inforMap)

Output:

[LOG]: Map (1) {"James" => { "name":
"James", "age": 28, "country": "Japan"
}}

With this example, I create a Map that can get a string key and an object detailInfor value.

Example:

enum animalList {
  dog='Dog',
  cat='Cat',
  bird='bird',
  chickens='Chickens',
  penguins='Penguins',
  pigeons='Pigeons'
}

let animalMap = new Map<animalList,number>([
    [animalList.dog,1],[animalList.penguins,20]
    ,[animalList.chickens,3]
])

console.log(animalMap)

Output: 

[LOG]: Map (3) {"Dog" => 1, "Penguins" => 20, "Chickens" => 3} 

Here I create a Map with animalList enum key and number value.

You can also set multiple types by union type.

Example:

const anMap = new Map<string,number|string>

Here in anMap, value can get both number and string type.

Some Map methods

Typescript also provides us with a lot of methods to work with Map.

Example:

enum animalList {
  dog='Dog',
  cat='Cat',
  bird='bird',
  chickens='Chickens',
  penguins='Penguins',
  pigeons='Pigeons'
}

let animalMap = new Map<animalList,number>([
    [animalList.dog,1],[animalList.penguins,20]
    ,[animalList.chickens,3]
])

// Get method help you to get value base on key
const getAnimal = animalMap.get(animalList.dog)
console.log('get dog index: '+ getAnimal)

// Set method help you to insert key-value pair into map
const setAnimal = animalMap.set(animalList.pigeons,4)
console.log(animalList)

// Has method check if your Map has key-pair value
console.log(animalMap.has(animalList.penguins))

Output:

[LOG]: "get dog index: 1" 
[LOG]: { "dog": "Dog", "cat": "Cat", "bird": "bird", "chickens": "Chickens", "penguins": "Penguins", "pigeons": "Pigeons" } 
[LOG]: true 

You can read more about the Typescript Map constructor method here.

Summary

I explained how to initialize and type a Map in Typescript in this article. I hope you enjoy it. Thanks for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *