Why advanced utility types matter in Typescript - See It in Action

Why advanced utility types matter

📖 Scenario: Imagine you are building a simple app to manage a list of users. Each user has a name, age, and email. Sometimes, you want to update only some parts of a user's information without changing everything.

🎯 Goal: You will learn how to use advanced utility types in TypeScript to make your code safer and easier to work with. You will create a user object, define a partial update type, apply updates, and then display the updated user.

📋 What You'll Learn

Create a user object with exact properties and values

Create a type called PartialUser using the Partial utility type

Write a function called updateUser that takes a user and a partial update and returns the updated user

Print the updated user object

💡 Why This Matters

🌍 Real World

Updating user profiles or settings where only some fields change is common in apps and websites.

💼 Career

Understanding utility types helps you write safer, cleaner TypeScript code, which is valuable for frontend and backend development jobs.

1

Create the initial user object

Create a constant called user with the exact properties: name set to "Alice", age set to 30, and email set to "[e-mail]".

Typescript

# Your code here

Need a hint?

Use const to create the user object with the exact keys and values.

2

Create a partial update type

Create a type called PartialUser using the built-in TypeScript utility type Partial applied to the type of user.

Typescript

const user = { name: "Alice", age: 30, email: "[e-mail]" };
// Your code here

Need a hint?

Use type PartialUser = Partial<typeof user>; to create a type where all properties are optional.

3

Write a function to update the user

Write a function called updateUser that takes two parameters: original of type typeof user and updates of type PartialUser. The function should return a new object combining original and updates using the spread operator.

Typescript

const user = { name: "Alice", age: 30, email: "[e-mail]" };
type PartialUser = Partial;
// Your code here

Need a hint?

Use the spread operator { ...original, ...updates } to combine objects.

4

Update and print the user

Create a constant called updatedUser by calling updateUser with user and an object that updates age to 31. Then, print updatedUser using console.log.

Typescript

const user = { name: "Alice", age: 30, email: "[e-mail]" };
type PartialUser = Partial;
function updateUser(original: typeof user, updates: PartialUser): typeof user {
    return { ...original, ...updates };
}
// Your code here

Need a hint?

Call updateUser with the right arguments and print the result.