Mapped type modifiers (readonly, optional) in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the readonly modifier do in a mapped type?

It makes all properties in the mapped type read-only, meaning their values cannot be changed after initialization.

beginner

How do you make all properties optional in a mapped type?

By adding the ? modifier after the property name in the mapped type, like [P in keyof T]?: T[P].

intermediate

What is the effect of using +readonly and -readonly in mapped types?

+readonly adds the readonly modifier to properties, while -readonly removes it if it was present.

intermediate

Explain the difference between +? and -? in mapped types.

+? makes properties optional, -? makes them required (removes optional).

beginner

Show a simple example of a mapped type that makes all properties readonly and optional.

type ReadonlyOptional<T> = { readonly [P in keyof T]?: T[P] };

What does { readonly [P in keyof T]: T[P] } do?

A Makes all properties writable

B Makes all properties of T optional

C Makes all properties of T readonly

D Removes readonly from all properties

The readonly modifier before the property makes all properties readonly.

How do you remove the optional modifier from all properties in a mapped type?

A [P in keyof T]?: T[P]

B [P in keyof T]+readonly T[P]

C [P in keyof T]+?: T[P]

D [P in keyof T]-?: T[P]

-? removes the optional modifier, making properties required.

What does { -readonly [P in keyof T]: T[P] } do?

A Removes readonly from all properties

B Makes all properties optional

C Adds readonly to all properties

D Makes all properties required

-readonly removes the readonly modifier from properties.

Which syntax makes all properties optional in a mapped type?

A [P in keyof T]+?: T[P]

B [P in keyof T]?: T[P]

C [P in keyof T]-?: T[P]

D [P in keyof T]+readonly T[P]

Adding ? after the property name makes properties optional.

What is the result of { readonly [P in keyof T]?: T[P] }?

A All properties are optional and readonly

B All properties are optional and writable

C All properties are required and readonly

D All properties are required and writable

The readonly modifier makes properties readonly, and ? makes them optional.

Explain how to use mapped type modifiers to make all properties readonly and optional in TypeScript.

Think about adding +readonly and ? in the mapped type.

Describe the difference between + and - modifiers in mapped types for readonly and optional properties.

Consider how you can add or remove modifiers explicitly.

Practice

1.

What does the readonly modifier do when used in a mapped type in TypeScript?

easy

A. It allows properties to be changed freely.

B. It makes all properties optional.

C. It removes all properties from the type.

D. It makes all properties unchangeable (immutable).

Solution

1. Step 1: Understand the readonly modifier

   The readonly keyword in TypeScript means the property cannot be changed after initialization.

2. Step 2: Apply to mapped types

   When used in a mapped type, it makes all properties of the type unchangeable.

3. Final Answer:

   It makes all properties unchangeable (immutable). -> Option D

4. Quick Check:

   readonly = immutable [OK]

Hint: Readonly means no changes allowed to properties [OK]

Common Mistakes:

• Confusing readonly with optional
• Thinking readonly removes properties
• Assuming readonly allows changes

2.

Which of the following is the correct syntax to make all properties optional in a mapped type?

type PartialType<T> = { ? }

easy

A. type PartialType<T> = { [P in keyof T]?: T[P]; }

B. type PartialType<T> = { [P in keyof T]: T[P]?; }

C. type PartialType<T> = { [P in keyof T]-?: T[P]; }

D. type PartialType<T> = { readonly [P in keyof T]: T[P]; }

Solution

1. Step 1: Recall optional property syntax

   In TypeScript, adding ? after a property name makes it optional.

2. Step 2: Apply optional modifier in mapped type

   The correct syntax is [P in keyof T]?: T[P] to make all properties optional.

3. Final Answer:

   type PartialType<T> = { [P in keyof T]?: T[P]; } -> Option A

4. Quick Check:

   Optional properties use ?: [OK]

Hint: Use ?: after property name to make it optional [OK]

Common Mistakes:

• Placing ? after the type instead of property
• Using -? which removes optional
• Confusing readonly with optional

3.

What is the output type of the following code?

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

const user: ReadonlyUser = { name: "Alice", age: 30 };
user.age = 31;

medium

A. No error, user.age is updated to 31.

B. No error, but user.age remains 30.

C. Error: Cannot assign to 'age' because it is a read-only property.

D. Error: Property 'age' does not exist on type 'ReadonlyUser'.

Solution

1. Step 1: Understand the mapped type with readonly

   The type ReadonlyUser makes all properties of User readonly.

2. Step 2: Check assignment to readonly property

   Trying to assign user.age = 31 causes a compile-time error because age is readonly.

3. Final Answer:

   Error: Cannot assign to 'age' because it is a read-only property. -> Option C

4. Quick Check:

   Readonly properties cannot be assigned new values [OK]

Hint: Assigning to readonly property causes error [OK]

Common Mistakes:

• Assuming readonly allows updates
• Thinking property disappears
• Confusing runtime error with compile error

4.

Identify the error in this mapped type that tries to make all properties optional:

type OptionalType<T> = { [P in keyof T]-?: T[P]; };

medium

A. The syntax is correct; no error.

B. The -? removes optional, so properties are required, not optional.

C. The -? makes properties readonly, causing error.

D. The mapped type is missing a return type.

Solution

1. Step 1: Understand -? modifier

   The -? removes the optional modifier from properties, making them required.

2. Step 2: Check effect on properties

   Since the goal was to make properties optional, using -? is the opposite and causes the error.

3. Final Answer:

   The -? removes optional, so properties are required, not optional. -> Option B

4. Quick Check:

   -? removes optional [OK]

Hint: -? removes optional, ?: adds optional [OK]

Common Mistakes:

• Confusing -? with readonly
• Thinking -? adds optional
• Ignoring the effect of modifiers

5.

Given the type below, which mapped type correctly makes all properties both readonly and optional?

type Config = { url: string; timeout: number; debug: boolean };

hard

A. type ReadonlyOptional<T> = { readonly [P in keyof T]?: T[P] }

B. type ReadonlyOptional<T> = { [P in keyof T]?: readonly T[P] }

C. type ReadonlyOptional<T> = { [P in keyof T]-?: readonly T[P] }

D. type ReadonlyOptional<T> = { readonly [P in keyof T]-?: T[P] }

Solution

1. Step 1: Combine readonly and optional modifiers

   To make properties readonly and optional, use readonly before the property and ? after the property name.

2. Step 2: Analyze each option

   type ReadonlyOptional<T> = { readonly [P in keyof T]?: T[P] } correctly places readonly before and ? after the property name. Others misuse readonly or optional placement.

3. Final Answer:

   type ReadonlyOptional<T> = { readonly [P in keyof T]?: T[P] } -> Option A

4. Quick Check:

   readonly before, optional after property name [OK]

Hint: Put readonly before and ? after property name [OK]

Common Mistakes:

• Placing readonly after the type
• Using -? which removes optional
• Confusing readonly with optional placement