Mapped type for deep transformations in Typescript - Mini Project: Build & Apply

Mapped type for deep transformations

📖 Scenario: Imagine you have a complex object with nested properties. You want to create a new type that changes all the properties deeply, for example, making all properties readonly at every level.

🎯 Goal: You will build a DeepReadonly mapped type that makes every property of an object and its nested objects readonly.

📋 What You'll Learn

Create a nested object type called Settings with exact properties

Create a mapped type called DeepReadonly that recursively makes properties readonly

Use DeepReadonly to create a readonly version of Settings

Print the readonly object to verify the type works

💡 Why This Matters

🌍 Real World

Making objects deeply readonly is useful in large applications to prevent accidental changes to configuration or state objects.

💼 Career

Understanding mapped types and recursive type transformations is important for TypeScript developers working on complex codebases and libraries.

1

Create the nested object type Settings

Create a TypeScript type called Settings with these exact properties: theme as a string, version as a number, and options as an object with darkMode as boolean and languages as a string array.

Typescript

# Your code here

Hint

Use type Settings = { ... } and define nested properties exactly as described.

2

Create the mapped type DeepReadonly

Create a mapped type called DeepReadonly that takes a generic type T and makes all properties readonly recursively. Use readonly [P in keyof T] and conditional types to check if T[P] is an object to apply DeepReadonly again.

Typescript

type Settings = {
  theme: string;
  version: number;
  options: {
    darkMode: boolean;
    languages: string[];
  };
};

# Your code here

Hint

Use a mapped type with readonly and a conditional type to recurse on nested objects.

3

Create a readonly version of Settings using DeepReadonly

Create a type called ReadonlySettings by applying DeepReadonly to Settings. Then create a constant settings of type ReadonlySettings with the exact values: theme as "dark", version as 1, options.darkMode as true, and options.languages as ["en", "fr"].

Typescript

type Settings = {
  theme: string;
  version: number;
  options: {
    darkMode: boolean;
    languages: string[];
  };
};

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

# Your code here

Hint

Use type ReadonlySettings = DeepReadonly<Settings> and create a constant settings with the exact values.

4

Print the readonly settings object

Write a console.log statement to print the settings object.

Typescript

type Settings = {
  theme: string;
  version: number;
  options: {
    darkMode: boolean;
    languages: string[];
  };
};

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

// Create readonly version
 type ReadonlySettings = DeepReadonly;

const settings: ReadonlySettings = {
  theme: "dark",
  version: 1,
  options: {
    darkMode: true,
    languages: ["en", "fr"]
  }
};

# Your code here

Hint

Use console.log(settings) to print the object.

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