Mapped type modifiers (readonly, optional) in Typescript - Mini Project: Build & Apply

Mapped type modifiers (readonly, optional)

📖 Scenario: You are working on a simple user profile system. You want to create different versions of a user object: one where all properties are readonly, and another where all properties are optional. This helps you understand how to use mapped type modifiers in TypeScript.

🎯 Goal: Build TypeScript mapped types that make all properties of a user object readonly and another mapped type that makes all properties optional.

📋 What You'll Learn

Create an interface User with exact properties: name (string), age (number), email (string)

Create a mapped type ReadonlyUser that makes all properties of User readonly

Create a mapped type OptionalUser that makes all properties of User optional

Create variables readonlyUser and optionalUser using these mapped types

Print the types of readonlyUser and optionalUser to verify

💡 Why This Matters

🌍 Real World

Mapped types help you create flexible and reusable types in TypeScript, useful when working with APIs or complex data models.

💼 Career

Understanding mapped type modifiers is important for writing safe and maintainable TypeScript code in professional software development.

1

Create the User interface

Create an interface called User with these exact properties: name of type string, age of type number, and email of type string.

Typescript

// Your code here

Hint

Use the interface keyword and list properties with their types inside curly braces.

2

Create the ReadonlyUser mapped type

Create a mapped type called ReadonlyUser that makes all properties of User readonly using the readonly modifier and keyof User.

Typescript

interface User {
  name: string;
  age: number;
  email: string;
}

// Your code here

Hint

Use type ReadonlyUser = { readonly [K in keyof User]: User[K] } to make all properties readonly.

3

Create the OptionalUser mapped type

Create a mapped type called OptionalUser that makes all properties of User optional using the ? modifier and keyof User.

Typescript

interface User {
  name: string;
  age: number;
  email: string;
}

type ReadonlyUser = {
  readonly [K in keyof User]: User[K];
};

// Your code here

Hint

Use type OptionalUser = { [K in keyof User]?: User[K] } to make all properties optional.

4

Create variables and print their types

Create a variable called readonlyUser of type ReadonlyUser with values name: "Alice", age: 30, email: "[e-mail]". Create another variable called optionalUser of type OptionalUser with only name: "Bob". Then print both variables using console.log.

Typescript

interface User {
  name: string;
  age: number;
  email: string;
}

type ReadonlyUser = {
  readonly [K in keyof User]: User[K];
};

type OptionalUser = {
  [K in keyof User]?: User[K];
};

// Your code here

Hint

Use const readonlyUser: ReadonlyUser = { ... } and const optionalUser: OptionalUser = { ... }. Then print with console.log.

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