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 Map Type
 

Typescript Map Type

Lalita Gupta
Article byLalita Gupta
EDUCBA
Reviewed byRavi Rathore

Updated February 17, 2023

Introduction to Typescript Map Type

TypeScript map type is defined as; it is a new data structure that can be appended in the ES6 version of JavaScript, which can also authorize us to reserve the data in the key-value set and also make sure about the actual insertion order of the keys, which is close to the other programming language. In typescript, we can utilize any value either as a key or as a value, in which we can say that map acts as a data structure that can reserve the key-value entries and in typescript. We can generate a map with the help of a new keyword.

 

 

Typescript Map Type

Overview of Typescript Map Type

Typescript is a new data structure that can be implemented in ES6 in which a map can be authorized to reserve entries in a key-value format which is like what a map can do in other programming languages, a map is a group in which it has a size, an order, and we can repeat above its key and values. The map and lists are the fundamental data structure that can be utilized in every programming language to interpret the application logic. The map can rapidly recover the data items from the cache. Still, a list is a data structure in which data items are reserved in sequence order.

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

How to Create a Typescript Map?

Let us see how to create a typescript map,

  • First, we have to open the IDE and let us assume that we have a list of properties propA and propB,

Now, we can use this list to generate a new type which has been shown in the below code,

type Properties = 'propA' | 'propB';
type MyMappedType = {
}
  • Under the ‘MyMappedType,’ we can iterate our properties by entering in the square bracket so we can say that each property P can control the property name, which means each property in the property list can create a new property of ‘MyMappedType.’
  • On the right side of the expression, we can able to utilize the property name as given below,
type Properties = 'propA' | 'propB';
type MyMappedType = {
[P in Properties]: P;
}
  • We can map type to generate the new type from an existing type in which generic type parameter has been utilized to make us of the properties list.
  • Then we can call our new property,
type Properties = 'propA' | 'propB';
type MyMappedType<Properties> = {
[P in Properties]: P;
}

Typescript Mapping Modifier

Two mapping modifiers can be appealed to at the time of mapping that is, ‘readonly’ and ‘?’ which can influence mutability and optionality accordingly,

We can separate or append the above modifiers by prefixing the ‘–’ or ‘+,’ and if we do not append any prefix, it can be considered as a ‘+.’

  • readonly: This modifier can be utilized in a mapped type to compel the derived properties as ‘readonly.’
"type ReadonlyTodoItem = Readonly<TodoItem>;"

If we try to allocate a value to the ‘readonly’ property, then the compiler will give an error.

  • We can remove the ‘readonly’ property by using the ‘-readonly’ property, and if we define the ‘Mutable<T>’ mapped type has been utilized to remove the ‘readonly’ modifier from all the properties which are described in T.
  • ?: By adding ‘?’ behind the property name while starting the type, we can able to make an object property compulsory,
interface TodoItem {
description: string;
priority?: "fast" | "medium" | "slow";
}

Instead of ‘?’ modifiers, the ‘priority’ property can be described when creating an object of Todo Item type.

It can also be able to remove to make property required.

Partial<T> can be utilized to append the ‘?’ modifier to all properties in the provided type, and it can be removed by using ‘-‘ before the ‘?’, which can make that property required.

Typescript Map Type List

Typescript does not have an in-built ‘list’ type in which it gives an ‘Array’ type for reserving the adjacent data components, which is simple to generate a list data structure ADT with the ‘Array’ type.

class List<T> {
private items: Array<T>;
constructor(n? : number, defaultValue?: T){
if ( n === undefined) {
this.items = [];
} else {
if ( n && defaultValue){
this.items = Array(n).fill(defaultValue);
} else {
this.items = Array(n);
}
}
}
push(item : T){
this.items.push(item);
}
pop(item : T){
return this.items.pop();
}
get(index : number) : T | undefined {
return this.items[index];
}
set( index : number, item : T){
this.items[index] = item;
}
getItems() : Array<T> {
return this.items;
}
}
List.prototype.toString = function listToString(){
return JSON.stringify(this.getItems());
}
var list: List<string> = new List(2, "default");
list.set(4, "second");
list.set(0, "first");
console.log(list.toString());

Output:

Typescript map type list

Examples of Typescript Map Type

Below are the different examples of Typescript Map Type:

Example #1 – Using map methods

When we try to implement the below code, the related output is also given below,

Code:

let map = new Map();
map.set('1', 'abhay');
map.set(1, 'www.google.com');
map.set(true, 'Yes');
map.set('2', 'amar');
console.log( "Value1= " +map.get(1)   );
console.log("Value2= " + map.get('1') );
console.log( "Key is Present= " +map.has(3) );
console.log( "Size= " +map.size );
console.log( "Delete value= " +map.delete(1) );
console.log( "New Size= " +map.size );

Output:

Using map methods

Example #2 – Iterating the map data

We can emphasize the data under the map key or values by utilizing the ‘for…of’ loop; let us see an example to understand it,

Code:

let lifeMapping = new Map();
lifeMapping.set("Anaya", 20);
lifeMapping.set("Aaryan", 31);
lifeMapping.set("Ridhan", 15);
for (let key of lifeMapping.keys()) {
console.log("Map Keys= " +key);
}
for (let value of lifeMapping.values()) {
console.log("Map Values= " +value);
}
console.log("The Map listing is: ");
for (let entry of lifeMapping.entries()) {
console.log(entry[0], entry[1]);
}

Output:

Iterating the map data

Conclusion

In this article, we conclude that it is like a new data structure of JavaScript that can authorize us to reserve the data in key-value pairs; we have also discussed how to generate the typescript map, typescript mapping modifier, typescript map type list, and also seen the examples of typescript.

Recommended Articles

This is a guide to Typescript Map Type. Here we discuss the introduction and how to create Typescript Map along with a modifier, list, and examples. You may also have a look at the following articles to learn more –

  1. TypeScript babel
  2. TypeScript enum
  3. TypeScript class
  4. TypeScript map

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