Readonly utility type in Typescript - Mini Project: Build & Apply

Using the Readonly Utility Type in TypeScript

📖 Scenario: You are creating a simple program to manage a user's profile information. You want to make sure that once the profile data is set, it cannot be changed accidentally.

🎯 Goal: Learn how to use the Readonly utility type in TypeScript to make an object immutable.

📋 What You'll Learn

Create an object with user profile data

Create a readonly version of the user profile object

Try to update the readonly object (should cause error)

Print the readonly user profile object

💡 Why This Matters

🌍 Real World

Readonly types help prevent accidental changes to important data like user profiles, settings, or configuration objects in real applications.

💼 Career

Understanding Readonly and other utility types is important for writing safe and maintainable TypeScript code in professional software development.

1

Create a user profile object

Create a variable called userProfile with type { name: string; age: number; } and assign it the values { name: 'Alice', age: 30 }.

Typescript

# Create the userProfile object with name 'Alice' and age 30
# Your code here

Need a hint?

Use const userProfile: { name: string; age: number; } = { name: 'Alice', age: 30 };

2

Create a readonly version of the user profile

Create a variable called readonlyUserProfile with type Readonly<typeof userProfile> and assign it the value of userProfile.

Typescript

const userProfile: { name: string; age: number; } = { name: 'Alice', age: 30 };
# Create readonlyUserProfile using Readonly
# Your code here

Need a hint?

Use const readonlyUserProfile: Readonly<typeof userProfile> = userProfile;

3

Try to update the readonly user profile

Add a line that tries to change readonlyUserProfile.age to 31. This should cause a TypeScript error because the object is readonly.

Typescript

const userProfile: { name: string; age: number; } = { name: 'Alice', age: 30 };
const readonlyUserProfile: Readonly = userProfile;
# Try to change readonlyUserProfile.age to 31
# Your code here

Need a hint?

Write readonlyUserProfile.age = 31; to see the error.

4

Print the readonly user profile

Write console.log(readonlyUserProfile) to display the readonly user profile object.

Typescript

const userProfile: { name: string; age: number; } = { name: 'Alice', age: 30 };
const readonlyUserProfile: Readonly = userProfile;
// readonlyUserProfile.age = 31; // This line will cause a TypeScript error
# Print readonlyUserProfile
# Your code here

Need a hint?

Use console.log(readonlyUserProfile); to print the object.