Mapped type modifiers (readonly, optional) in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make all properties of Person readonly.

Typescript

type ReadonlyPerson = { readonly [K in keyof Person][1] };

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

A: Person[K]

B? Person[K]

C= Person[K]

D- Person[K]

Attempts:

3 left

💡 Hint

Common Mistakes

Using '?' instead of ':' after the mapped key.

Omitting the property type after the key.

Using '=' instead of ':'.

In mapped types, readonly [K in keyof Person]: Person[K] makes all properties readonly by adding readonly and keeping the property types.

2fill in blank

medium

Complete the code to make all properties of Person optional.

Typescript

type OptionalPerson = { [K in keyof Person][1] };

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

A? Person[K]

B: Person[K]

C- Person[K]

D= Person[K]

Attempts:

3 left

💡 Hint

Common Mistakes

Using ':' instead of '?' after the key.

Forgetting to specify the property type.

Using '=' instead of ':'.

Adding ? after the key in a mapped type makes the property optional.

3fill in blank

hard

Fix the error in the mapped type to remove the readonly modifier from all properties.

Typescript

type MutablePerson = { -readonly [K in keyof Person][1] };

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

A? Person[K]

B= Person[K]

C: Person[K]

D- Person[K]

Attempts:

3 left

💡 Hint

Common Mistakes

Using '?' instead of ':' after the key.

Using '=' instead of ':'.

Omitting the property type.

The -readonly modifier removes the readonly attribute, and the property type must follow a colon.

4fill in blank

hard

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

Typescript

type ReadonlyOptionalPerson = { readonly [K in keyof Person][1] };

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

A? Person[K]

B: Person[K]

C- Person[K]

D= Person[K]

Attempts:

3 left

💡 Hint

Common Mistakes

Placing the colon before the question mark.

Omitting the readonly modifier.

Using '=' instead of ':'.

To make properties both readonly and optional, add readonly before the key and ? after the key, then specify the type with a colon.

5fill in blank

hard

Fill all three blanks to create a mapped type that removes readonly and optional modifiers from all properties.

Typescript

type RequiredMutablePerson = { -readonly [K in keyof Person][1] };

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

A?

B: Person[K]

C-?

D= Person[K]

Attempts:

3 left

💡 Hint

Common Mistakes

Using '?' instead of '-?' to remove optional.

Omitting the colon before the property type.

Using '=' instead of ':'.

To remove readonly and optional modifiers, use -readonly before the key and -? after the key, then specify the property type with a colon. The -? removes optionality.