Updated May 18, 2023
Introduction to Typescript Key-Value Pair
Typescript comes up with functions that can be used for writing scripts. A key-value pair is a great 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, the Key, or its associated value.
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 the 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 done, we define key-value storage storing the actual Key-> value pairs.
Once a particular Key is called, the corresponding values are fetched and returned 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 introduced in ES6 that allows us to store the key-value pair.
It also remembers the insertion order here. It has specific 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.
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 use 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 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 :
You can check the size of a Map in TypeScript by using 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.
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 Regulations for key-value
Let us review 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.
- In TypeScript, a Map preserves the insertion order of Key-Value pairs.
- It has methods to set, get, and delete any key-value pair.
- You can also iterate over a key item in TypeScript and apply the same iteration over its values.
- In TypeScript, you can access any Key-Value Pair with an index signature.
- It provides a Type-Safe model.
The above article shows 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. Using various examples and classifications, we will explain how the Key-Value function works in TypeScript and its usage 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” benefited you. You can view EDUCBA’s recommended articles for more information.
