Mapped types are a powerful feature in TypeScript, and they are used to transform and create new types from existing ones. Mapped types provide a concise way to generate new types by applying a specific operation or transformation to each property in an existing type.

This allows for creating more flexible and reusable code. Mapped types were introduced in TypeScript 2.1 and have since become a crucial part of advanced TypeScript programming. Let's dive deeper into mapped types in JavaScript and TypeScript.

Basic Syntax:

Mapped types use a mapping function to transform properties in an existing type to create a new type. The syntax is as follows:

javascripttype NewType = {
  [Property in ExistingType]: NewProperty;
};

• Property is a variable that represents each property key in the existing type.

• ExistingType is the type from which you want to create the new type.

• NewProperty is the new type or transformation you want to apply to each property.

Examples of Mapped Types:

1. Readonly Properties:

A common use case for mapped types is to create a new type where all properties of an existing type become readonly (immutable).

javascripttype Readonly = {
  readonly [P in keyof T]: T[P];
};

type MyObject = {
  name: string;
  age: number;
};

type ReadonlyMyObject = Readonly;

2. Optional Properties:

You can create a new type with all properties of an existing type being optional.

javascripttype Partial = {
  [P in keyof T]?: T[P];
};

type MyObject = {
  name: string;
  age: number;
};

type PartialMyObject = Partial;

3. Transforming Property Types:

You can change the type of each property in an existing type.

javascripttype NumberToString = {
  [P in keyof T]: string;
};

type MyObject = {
  value1: number;
  value2: number;
};

type StringObject = NumberToString;

Keyof and keyof typeof:

The keyof operator is used to get a union type of all property keys in a type. keyof typeof is used to get a union type of all property keys in an object (instance), rather than a type.

javascripttype MyObject = {
  name: string;
  age: number;
};

type MyObjectKeys = keyof MyObject; // "name" | "age"

const obj = { name: "John", age: 30 };
type ObjectKeys = keyof typeof obj; // "name" | "age"

Mapped Types with Constraints:

You can also apply constraints to mapped types to filter or transform properties based on certain conditions.

javascripttype NumberProperties = {
  [K in keyof T]: T[K] extends number ? K : never;
};

type MyObject = {
  name: string;
  age: number;
  score: number;
};

type NumberKeys = NumberProperties; // "age" | "score"

Predefined Mapped Types:

TypeScript includes several predefined mapped types, such as Readonly<T>, Partial<T>, and Record<K, T>, which you can use out of the box for common transformations.

javascripttype MyObject = {
  name: string;
  age: number;
};

type ReadonlyMyObject = Readonly;
type PartialMyObject = Partial;
type StringRecord = Record<"a" | "b", string>;

Mapped types are a powerful tool in TypeScript, providing a way to generate new types from existing ones. They enable you to create more flexible and reusable code by transforming properties, changing property types, and adding or removing properties based on specific conditions. Understanding mapped types is crucial for leveraging the full potential of TypeScript's type system.