Mapped type modifiers (readonly, optional) in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a mapped type with readonly modifier

What is the type of ReadonlyPerson after applying the mapped type with readonly modifier?

Typescript

type Person = { name: string; age: number };
type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
};

const p: ReadonlyPerson = { name: "Alice", age: 30 };
p.name = "Bob"; // What happens here?

A Compilation error: Cannot assign to 'name' because it is a read-only property.

B No error, p.name is changed to 'Bob'.

C Runtime error: Cannot assign to read-only property 'name'.

D Compilation error: Property 'name' does not exist on type 'ReadonlyPerson'.

💡 Hint

Readonly mapped types make all properties immutable at compile time.

The readonly modifier in a mapped type makes all properties read-only. Trying to assign a new value to p.name causes a compile-time error.

❓ Predict Output

intermediate

Effect of optional modifier in mapped types

Given the mapped type below, what is the type of PartialPerson?

Typescript

type Person = { name: string; age: number };
type PartialPerson = {
  [K in keyof Person]?: Person[K];
};

const p: PartialPerson = { name: "Alice" };

A { name?: string; age: number; }

B { name: string; age: number; }

C { name?: string | undefined; age?: number | undefined; }

D { name: string | undefined; age: number | undefined; }

💡 Hint

The optional modifier adds '?' to all properties.

The ? in the mapped type makes all properties optional, so both name and age become optional with their original types.

🔧 Debug

advanced

Identify the error in mapped type modifiers usage

Which option contains a syntax error in the mapped type modifiers usage?

Typescript

type Flags = { a: boolean; b: boolean };
type ModifiedFlags = {
  +readonly [K in keyof Flags]-?: Flags[K];
};

A type ModifiedFlags = { +readonly -? [K in keyof Flags]; Flags[K]; };

B type ModifiedFlags = { readonly [K in keyof Flags]-?: Flags[K]; };

C type ModifiedFlags = { +readonly [K in keyof Flags]-?: Flags[K] };

D type ModifiedFlags = { +readonly [K in keyof Flags]-?: Flags[K]; };

💡 Hint

Check the syntax for mapped type modifiers and property declarations.

Option A is invalid because it uses a semicolon instead of a colon between the property name and type, causing a syntax error.

❓ Predict Output

advanced

Combined readonly and optional modifiers in mapped types

What is the resulting type of ReadonlyPartial?

Typescript

type User = { id: number; name: string };
type ReadonlyPartial = {
  readonly [K in keyof User]?: User[K];
};

A { id?: number; name?: string; }

B { readonly id?: number | undefined; readonly name?: string | undefined; }

C { readonly id: number; readonly name: string; }

D { id: number; name: string; }

💡 Hint

Both readonly and optional modifiers apply to all properties.

The mapped type applies readonly and ? to each property, making them read-only and optional.

🧠 Conceptual

expert

Understanding the effect of removing modifiers in mapped types

Given the type below, what does the -readonly and -? modifiers do in the mapped type?

Typescript

type Config = { readonly host?: string; readonly port?: number };
type MutableRequiredConfig = {
  -readonly [K in keyof Config]-?: Config[K];
};

A Removes optional but keeps properties readonly.

B Adds readonly and optional modifiers, making all properties immutable and optional.

C Removes readonly but keeps properties optional.

D Removes readonly and optional modifiers, making all properties mutable and required.

💡 Hint

Minus modifiers remove the specified property modifiers.

The -readonly removes the readonly modifier, and -? removes the optional modifier, so all properties become mutable and required.