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:
- How To Get An Enum Key By Value In Typescript
- How To Disable Type Checking For A Line In Typescript
- How To Disable Type Checking For Javascript Files In Typescript
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm