Typescript Key-Value Pair

Introduction to Typescript Key-Value Pair

The TypeScript comes up with the 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 TypeScript Object. The values can be function, 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 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 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 is fetched and is 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:

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 Example for Key value pair 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'))

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

1. Use TypeScript Map for Storing the Key-Value pair.
2. Calling the object with the key will return the value for that particular pair.
3. We can also store multiple values to a single key.
4. The insertion order is preserved in TypeScript Map Key value.
5. It has methods where we can set, get, delete any key-value pair.
6. Iteration of a key item is also allowed with the same applicable over the values.
7. An index signature can also be used for accessing any Key-Value Pair.
8. 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 are is used in 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

This is a guide to TypeScript Key value pair. Here we discuss the definition, syntax, methods, and examples with code implementation. You can also go through our other related articles to learn more –

1. JavaScript JSON to string
2. TypeScript Question Mark
3. Match Function in Javascript
4. TypeScript Export Function