EDUCBA Logo

EDUCBA

MENUMENU
  • Explore
    • EDUCBA Pro
    • PRO Bundles
    • Featured Skills
    • New & Trending
    • Fresh Entries
    • Finance
    • Data Science
    • Programming and Dev
    • Excel
    • Marketing
    • HR
    • PDP
    • VFX and Design
    • Project Management
    • Exam Prep
    • All Courses
  • Blog
  • Enterprise
  • Free Courses
  • Log in
  • Sign Up
Home Software Development Software Development Tutorials TypeScript Tutorial Typescript Key-Value Pair
 

Typescript Key-Value Pair

Arpit Anand
Article byArpit Anand
EDUCBA
Reviewed byRavi Rathore

Updated May 18, 2023

Typescript Key-Value Pair

 

 

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:

Typescript Key Value Pair 1

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:

Typescript Key Value Pair 2

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:

Typescript Key Value Pair 3

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 :

Typescript Key Value Pair 4

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:

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.

output 1

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.

  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 in a single key.
  4. In TypeScript, a Map preserves the insertion order of Key-Value pairs.
  5. It has methods to set, get, and delete any key-value pair.
  6. You can also iterate over a key item in TypeScript and apply the same iteration over its values.
  7. In TypeScript, you can access any Key-Value Pair with an index signature.
  8. 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.

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

Primary Sidebar

Footer

Follow us!
  • EDUCBA FacebookEDUCBA TwitterEDUCBA LinkedINEDUCBA Instagram
  • EDUCBA YoutubeEDUCBA CourseraEDUCBA Udemy
APPS
EDUCBA Android AppEDUCBA iOS App
Blog
  • Blog
  • Free Tutorials
  • About us
  • Contact us
  • Log in
Courses
  • Enterprise Solutions
  • Free Courses
  • Explore Programs
  • All Courses
  • All in One Bundles
  • Sign up
Email
  • [email protected]

ISO 10004:2018 & ISO 9001:2015 Certified

© 2025 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA Login

Forgot Password?

🚀 Limited Time Offer! - 🎁 ENROLL NOW