Introduction to Typescript Key-Value Pair
Typescript comes up with functions that can be used for writing scripts. A key-value pair is a wonderful functionality in an object-oriented programming approach that can be used in Typescript for generating values. These key-value pairs in Typescript are present in the Typescript Object. The values can be function, an array of objects, etc.
We can also add a new key-value pair to a typescript and can use the value further. A data structure Map in Typescript also stores the value in the Key-Value pair and maintains the insertion order making it easier for scriptwriting. We can use any value in a Key value pair be it the key or the value associated with it.
Syntax:
The syntax for Typescript Key Value Pair is:-
var item: {[key: string]: number}It has based on Key-Value Pair mapping i.e.
Typescript Key Value Pair Working
Let us try to understand the working of the Key-Value pair.
A key-value pair is based on the structure of Key and value i.e the first step is to store the key value and then associate the value of it in a Value tag. This is done with the help of API where we have the methods set and get a key to store the key. Once that is done we just define key-value storage storing the actual Key-> value pairs.
Once a particular Key is called the corresponding values are fetched and returned back to the script.
Example :
let indexedArray1: {[key: string]: number} = {
foo: 123,
bar: 456
}
console.log(indexedArray1['foo'])
console.log(indexedArray1.foo)This will get the value of the key foo and will print its value in the console.
Output:
The map is a data structure that was introduced in ES6 that allows us to store the key-value pair.
It also remembers the insertion order here. It has certain methods that help the user to work over the key-value function.
The map. set(key), map. get(key), map. has(key) are some of the proficient methods used.
We will see some examples of this later in this section.
We can also store the key-value pair in the Object instance. Just accessing the object values will give the desired result.
Example :
var demo = {
name:"Tom",
address:"UK"
};
console.log(demo.name)
console.log(demo.address)Output:
Example
Let us see some Examples of Key-value pairs in Typescript:
Create a TypeScript Map.
Set the values in the Map.
let mp = new Map([
["k1", "v1"],
["k2", "v2"]
]);We can also set the values with the methods that the Map method provides.
Just we need to initialize a map and use the set method of the Map.
Code:
let mp = new Map();
mp.set('1','Annad');
mp.set('2','Hello India');
mp.set('3',"setting the values");
console.log(mp.get('1'))
console.log(mp.get('2'))
console.log(mp.get('3'))Output:
Here we are using the set method to set the key and values in a Map.
A get method on the console will be required the retrieve the Key-Value pair.
We can also check whether the key is present or not using the function has(). The has() function checks whether the key-value pair exists or not and returns a Boolean true false for the same.
Code:
let mp = new Map();
mp.set('1','Annad');
mp.set('2','Hello India');
mp.set('3',"setting the values");
console.log(mp.has(1))
console.log(mp.has('1'))Output :
The size of this can be checked by the .size function.
let mp = new Map();
mp.set('1','Annad');
mp.set('2','Hello India');
mp.set('3',"setting the values");
console.log(mp.size)Output:
These are the various operations related to key-value pairs in Typescript.
We can also use the .delete function to delete any particular key and the corresponding value also.
let mp = new Map();
mp.set('1','Annad');
mp.set('2','Hello India');
mp.set('3',"setting the values");
console.log(mp.delete('1'))
console.log(mp.delete('3'))The delete operation returns a Boolean value True / False based on the processing it does.
From this, we saw how a namespace works in Typescript.
Rules and Regulation for key-value
Let us look over the rules and regulations required for Key-Value Pair in Typescript.
- Use Typescript Map for Storing the Key-Value pair.
- Calling the object with the key will return the value for that particular pair.
- We can also store multiple values in a single key.
- The insertion order is preserved in the Typescript Map Key value.
- It has methods where we can set, get, and delete any key-value pair.
- Iteration of a key item is also allowed with the same applicable over the values.
- An index signature can also be used for accessing any Key-Value Pair.
- It provides a Type-Safe model.
From the above article, we saw the rule for fetching and writing a key-value pair.
Conclusion
From the above article, we saw the use of Key-Value Pair in Typescript. From various examples and classifications, we tried to understand how the Key-Value function works in Typescript and what is used at the programming level. We also saw the internal working and the advantages of having a Key-Value pair which we are defining for various programming purposes. Also, the syntax and examples helped us to understand much precisely the function.
Recommended Articles
We hope that this EDUCBA information on “Typescript Key Value Pair” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
