Why Mapped type for deep transformations in Typescript? - Purpose & Use Cases

The Big Idea

What if you could rename every nested property in your data with just one simple rule?

The Scenario

Imagine you have a big box of nested folders and files, and you want to rename every file inside every folder by hand.

Doing this manually means opening each folder, finding each file, and renaming it one by one.

The Problem

This manual way is slow and tiring.

You might miss some files or make mistakes.

It's hard to keep track of all changes, especially when folders are deeply nested.

The Solution

Mapped types for deep transformations let you tell TypeScript to automatically change every property inside an object, even if it's nested inside other objects.

This means you write one rule, and it applies everywhere, saving time and avoiding errors.

Before vs After

✗ Before

type RenameProps<T> = { a: string; b: { c: number; d: boolean } };
// Manually rename each property
interface NewType {
  newA: string;
  b: {
    newC: number;
    newD: boolean;
  };
}

✓ After

type RenameProps<T> = {
  [K in keyof T as `new${Capitalize<string & K>}`]: T[K] extends object ? RenameProps<T[K]> : T[K]
};

What It Enables

You can transform complex nested data structures automatically and safely with just one reusable type.

Real Life Example

When working with data from an API, you might want to convert all property names to a different style or prefix them for clarity.

Mapped types for deep transformations let you do this easily without rewriting types for every nested level.

Key Takeaways

Manual renaming of nested properties is slow and error-prone.

Mapped types automate deep transformations across all nested levels.

This saves time and keeps your code consistent and safe.

Practice

1.

What is the main purpose of a mapped type in TypeScript?

easy

A. To create a new type by transforming each property of an existing type

B. To execute functions asynchronously

C. To define runtime values for variables

D. To handle errors in promises

Solution

1. Step 1: Understand mapped types

   Mapped types create new types by applying transformations to each property of an existing type.

2. Step 2: Compare options

   Only To create a new type by transforming each property of an existing type describes this behavior correctly; others relate to runtime or async concepts.

3. Final Answer:

   To create a new type by transforming each property of an existing type -> Option A

4. Quick Check:

   Mapped type = transform properties [OK]

Hint: Mapped types change keys' types one by one [OK]

Common Mistakes:

• Confusing mapped types with runtime functions
• Thinking mapped types handle async code
• Mixing mapped types with error handling

2.

Which of the following is the correct syntax to define a simple mapped type that makes all properties of T optional?

type PartialType = ?

easy

A. type PartialType<T> = { [P in keyof T]: T[P] }

B. type PartialType<T> = { [P in keyof T]: Optional }

C. type PartialType<T> = { [P in keyof T]?: T[P] }

D. type PartialType<T> = { [P: string]: T }

Solution

1. Step 1: Recall optional property syntax

   Adding a question mark after the property name makes it optional in mapped types.

2. Step 2: Analyze options

   type PartialType<T> = { [P in keyof T]?: T[P] } uses ?: correctly to make properties optional. type PartialType<T> = { [P in keyof T]: T[P] } keeps properties required. type PartialType<T> = { [P: string]: T } uses string keys incorrectly. type PartialType<T> = { [P in keyof T]: Optional } uses a non-existent Optional type.

3. Final Answer:

   type PartialType<T> = { [P in keyof T]?: T[P] } -> Option C

4. Quick Check:

   Optional properties use ? after key [OK]

Hint: Use ? after [P in keyof T] to make properties optional [OK]

Common Mistakes:

• Forgetting the ? to mark properties optional
• Using string index instead of keyof T
• Assuming Optional<T> is built-in

3.

Given the following code, what is the type of DeepReadonly<User>?

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P]
};

interface User {
  name: string;
  address: {
    city: string;
    zip: number;
  };
}

medium

A. { name: string; readonly address: { readonly city: string; readonly zip: number; } }

B. { name: string; address: { city: string; zip: number; } }

C. { readonly name: string; address: { city: string; zip: number; } }

D. { readonly name: string; readonly address: { readonly city: string; readonly zip: number; } }

Solution

1. Step 1: Understand DeepReadonly mapped type

   It recursively applies readonly to all properties, including nested objects.

2. Step 2: Apply to User interface

   Both name and address become readonly, and inside address, city and zip are also readonly.

3. Final Answer:

   { readonly name: string; readonly address: { readonly city: string; readonly zip: number; } } -> Option D

4. Quick Check:

   DeepReadonly = recursive readonly [OK]

Hint: DeepReadonly adds readonly recursively to all nested properties [OK]

Common Mistakes:

• Forgetting readonly on nested properties
• Assuming only top-level properties are readonly
• Confusing shallow and deep readonly

4.

Identify the error in this deep transformation mapped type:

type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
}

medium

A. Incorrect use of semicolon instead of comma in mapped type

B. No error; the type is correct

C. The conditional type should check for primitives, not objects

D. Missing semicolon after the mapped property

Solution

1. Step 1: Check mapped type syntax

   TypeScript object types, including mapped types, accept both commas and semicolons as separators, including trailing ones.

2. Step 2: Analyze the code

   The syntax is valid, and the logic correctly makes properties optional while recursing DeepPartial on nested objects and preserving primitives.

3. Final Answer:

   No error; the type is correct -> Option B

4. Quick Check:

   Mapped types accept , or ; [OK]

Hint: Mapped types support , or ; separators [OK]

Common Mistakes:

• Thinking semicolons are invalid in mapped types
• Confusing separator rules from object literals
• Overlooking recursive conditional logic

5.

How would you write a mapped type DeepNonNullable<T> that recursively removes null and undefined from all properties of T, including nested objects?

hard

A. type DeepNonNullable<T> = { [P in keyof T]: T[P] extends object ? DeepNonNullable<NonNullable<T[P]>> : NonNullable<T[P]> }

B. type DeepNonNullable<T> = { [P in keyof T]: NonNullable<T[P]> }

C. type DeepNonNullable<T> = { [P in keyof T]: T[P] extends object ? NonNullable<DeepNonNullable<T[P]>> : T[P] }

D. type DeepNonNullable<T> = { [P in keyof T]: T[P] extends object ? DeepNonNullable<T[P]> : T[P] }

Solution

1. Step 1: Understand NonNullable and recursion

   We must remove null and undefined from each property, then recurse if the property is an object.

2. Step 2: Analyze options

   type DeepNonNullable<T> = { [P in keyof T]: T[P] extends object ? DeepNonNullable<NonNullable<T[P]>> : NonNullable<T[P]> } first applies NonNullable to the property, then recursively applies DeepNonNullable to the cleaned type. This ensures null/undefined are removed at every level.

3. Final Answer:

   type DeepNonNullable<T> = { [P in keyof T]: T[P] extends object ? DeepNonNullable<NonNullable<T[P]>> : NonNullable<T[P]> } -> Option A

4. Quick Check:

   Remove null then recurse for objects [OK]

Hint: Apply NonNullable before recursion for deep cleaning [OK]

Common Mistakes:

• Not applying NonNullable before recursion
• Recursing without removing null/undefined
• Confusing order of conditional checks