Mapped type for deep transformations in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a mapped type that makes all properties of T optional.

Typescript

type PartialType<T> = { [K in keyof T]?: T[K] };

Drag options to blanks, or click blank then click option'

A?:

B[]

C?

D!

Attempts:

3 left

💡 Hint

Common Mistakes

Using just '?' without colon does not make properties optional in mapped types.

Using '!' marks properties as definitely assigned, not optional.

The ?: syntax makes each property optional in a mapped type.

2fill in blank

medium

Complete the code to recursively make all nested properties of T optional.

Typescript

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

Drag options to blanks, or click blank then click option'

APartial<T[K]>

BDeepPartial<T[K]>

CT[K]

DRequired<T[K]>

Attempts:

3 left

💡 Hint

Common Mistakes

Using Partial instead of DeepPartial only makes the first level optional.

Not using recursion causes nested properties to remain required.

Using DeepPartial<T[K]> recursively applies the partial transformation to nested objects.

3fill in blank

hard

Fix the error in the code to correctly check if T[K] is an object but not null or array.

Typescript

type DeepPartial<T> = { [K in keyof T]?: T[K] extends object ? (T[K] extends [1] ? T[K] : DeepPartial<T[K]>) : T[K] };

Drag options to blanks, or click blank then click option'

Anull | any[]

Bany[] | null

Cnever

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'any[] | null' instead of 'null | any[]' can cause confusion but is functionally same.

Not excluding arrays causes them to be treated as objects and recursed into incorrectly.

The check T[K] extends null | any[] excludes null and arrays from recursive partial application.

4fill in blank

hard

Fill both blanks to create a mapped type that makes all properties readonly and deeply readonly.

Typescript

type DeepReadonly<T> = { [1] [K in keyof T][2]: T[K] extends object ? DeepReadonly<T[K]> : T[K] };

Drag options to blanks, or click blank then click option'

Areadonly

B?

Creadonly?

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'readonly?' is invalid syntax.

Forgetting 'readonly' means properties can still be changed.

The readonly keyword before the property makes it readonly, and ? after the property name makes it optional if desired.

5fill in blank

hard

Fill all three blanks to create a mapped type that transforms all string properties to uppercase strings recursively.

Typescript

type DeepUppercase<T> = { [K in keyof T]: T[K] extends string ? [1] : T[K] extends object ? [2] : T[K] };

Drag options to blanks, or click blank then click option'

AUppercase<T[K]>

BDeepUppercase<T[K]>

Cstring

DLowercase<T[K]>

Attempts:

3 left

💡 Hint

Common Mistakes

Using Lowercase instead of Uppercase reverses the intended transformation.

Not applying recursion leaves nested strings unchanged.

Uppercase<T[K]> converts string literals to uppercase, and DeepUppercase<T[K]> applies the transformation recursively to nested objects.

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