Mapped type modifiers (readonly, optional) in Typescript

Introduction

Mapped type modifiers let you change properties of an object type all at once. You can make all properties readonly or optional easily.

When you want to make all properties of an object readonly to prevent changes.

When you want to make some or all properties optional for flexibility.

When you want to create a new type based on another but with modified property rules.

When you want to enforce immutability on an object type in your code.

When you want to allow partial updates by making properties optional.

Syntax

Typescript

type NewType = {
  readonly [Key in keyof OldType]: OldType[Key];
};

// or

type NewType = {
  [Key in keyof OldType]?: OldType[Key];
};

readonly before the property makes it unchangeable.

? after the property name makes it optional.

Examples

This makes all properties of Person readonly.

Typescript

type Person = {
  name: string;
  age: number;
};

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

This makes all properties of Person optional.

Typescript

type PartialPerson = {
  [K in keyof Person]?: Person[K];
};

This makes all properties both readonly and optional.

Typescript

type ReadonlyPartialPerson = {
  readonly [K in keyof Person]?: Person[K];
};

Sample Program

This program shows how to make all properties readonly and optional using mapped type modifiers. It also shows that trying to change a readonly property causes an error.

Typescript

type Person = {
  name: string;
  age: number;
};

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

const person: ReadonlyPerson = {
  name: "Alice",
  age: 30
};

// person.name = "Bob"; // Error: Cannot assign to 'name' because it is a read-only property

console.log(person.name);

// Now optional example

type PartialPerson = {
  [K in keyof Person]?: Person[K];
};

const partialPerson: PartialPerson = {
  name: "Charlie"
};

console.log(partialPerson.age);

Important Notes

Readonly properties cannot be changed after creation.

Optional properties may be missing or undefined.

You can combine readonly and ? to make properties both readonly and optional.

Summary

Mapped type modifiers let you change all properties of a type at once.

readonly makes properties unchangeable.

? makes properties optional.

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