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.