Interfaces and mapped types
The following code shows two interfaces, Start and End. End extends Start.
The above code can also be written in an easier, less time consuming way using mapped types. Like so:
interface Start {
first: string;
second: string;
}
type End = Start & { last: string }
Another example of mapped types for interfaces is given below:
interface X {
x: number;
}
interface Y {
y: number;
}
type XYType = X & Y;
Generics and mapped types
In the following example, we have used generics to make mapped type (NewMappedItem). From this mapped types, we made a new type (NewType).
Using a mapped type to create new type from existing type
As you can see, in the following example, we have made a new type using existing type using mapped types. T represents any type. We use the keyof to access each of the properties of T. T[i] gives the value of i in T.
Pick with mapped types
Pick is an inbuilt type that makes TypeScript only pick those specific Keys from our current Types (an interface or type ). This allows us to create a new type using Pick but only using the properties that are important (ignoring the others). Pick uses mapped types in the background. So let us see:
In the above code, you can see that MyPick was given type {id:3;name:”John”} and also the key/property(id) it should pick to make the new type, MyNewType.
FAQs
1. How to make readonly types using mapped types?
You can make readonly types using existing types with the help of mapped types in the following way:
2. How can you make optional properties using mapped types?
You can make optional properties in new type using existing types with the help of mapped types in the following way:
3. How can you make the nullable properties in mapped types?
You can make nullable properties in mapped types in the following way:
type NewMappedItem<T>={
[i in keyof T]:T[i] | null;
}
type NewType=NewMappedItem<{x:"x",y:"y"}>
Key Takeaways
From this article, we learn the basics about mapped types. We saw some practical coding examples of using mapped types. We used mapped types with interfaces, generics and also created new types from existing types. We also saw how mapped types are used in Pick.
But this is not enough; you need something extra to excel in Vue.js truly. If you want to learn more about Vue.js, you can read our articles on Vue.js or take our highly curated Web Development course.
518+ registered 
