EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials TypeScript Tutorial Typescript Map Type
Secondary Sidebar
Asp.Net MVC Interview Questions

DB2 Interview Questions

What is ARP?

Switch Statement in JavaScript

Remove Duplicate Elements from Array Javascript

Sort Array 0s,1s and 2s

Typescript Map Type

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.

How to Create a Typescript Map?

Let us see how to create a typescript map,

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

  • 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
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

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

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

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*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?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more