TypeScript Mapped Types

In this article, we are going to learn about the Mapped Types in TypeScript. TypeScript is a programming language that is a strict syntactical superset of JavaScript. It adds optional static typing and class-based object-oriented programming to JavaScript. One of the features of Typescript is Mapped types which are a powerful feature of TypeScript that allows you to create new types by transforming the properties of an existing type. It is a way of mapping the keys of one object to another object. It can be used to create new types that are more specific or to modify an existing type by adding, updating, or deleting properties. Mapped types can be used with any object type. They work by iterating over the keys of the object and creating a new object with the same keys but with new types.

Syntax:

{ [P in K]: T }

Where –

• P represents the property key, 
• K represents the union type of keys that you want to map over. 
• T represents the type of the property value.

Example 1: In this example, we will create readonly properties. This can be done by mapping over the keys of an object and setting the properties to readonly, then we create a new type MyReadonly that takes an object type T. We use a mapped type to iterate over the keys of T and set them to readonly. We then create an interface Person and use Readonly to create a new type ReadonlyPerson. We create an object of type ReadonlyPerson and try to modify the name property. TypeScript will throw an error because the property is readonly.

Javascript

type MyReadonly<T> = {
    readonly [P in keyof T]: T[P];
};

interface Person {
    name: string;
    age: number;
}

type ReadonlyPerson = MyReadonly<Person>;

const person: ReadonlyPerson
    = { name: 'John', age: 30 };

console.log(person);

Output:

Example 2: In this example, we will use mapped types to create partial properties. This can be done by mapping over the keys of an object and setting the properties to optional.  we create a new type Partial that takes an object type T. We use a mapped type to iterate over the keys of T and set them to optional. We then create an interface Person and use Partial to create a new type PartialPerson. We create an object of type PartialPerson and only set the name property. The age property is optional because it is not required in PartialPerson.

Javascript

type MyPartial<T> = {
    [P in keyof T]?: T[P];
};

interface Person {
    name: string;
    age: number;
}

type PartialPerson = Partial<Person>;

const person: PartialPerson = { name: 'John' };

console.log(person);

Output:

Conclusion: In this article, we covered the essential topics of Mapped types in Typescript, its syntax, and how can we use it. Mapped types are a powerful feature of TypeScript that allows you to create new types by transforming the properties of an existing type. Since it allows us to create new types based on existing ones so that our code will be more modular and maintainable, errors caused by duplicating code can be reduced, and we can create complex data structures.