Partial type in Typescript - Mini Project: Build & Apply

Using the Partial Type in TypeScript

📖 Scenario: You are building a user profile editor where users can update some of their information without changing everything.

🎯 Goal: Create a TypeScript program that uses the Partial type to allow updating only some properties of a user profile.

📋 What You'll Learn

Create an interface called UserProfile with exact properties: name (string), age (number), and email (string).

Create a variable called user of type UserProfile with initial values.

Create a variable called update of type Partial<UserProfile> with some properties to update.

Write a function called updateUser that takes user and update and returns a new UserProfile with updated properties.

Print the updated user profile.

💡 Why This Matters

🌍 Real World

Partial types are useful when you want to update only some fields of a data object, like editing user profiles or settings.

💼 Career

Understanding Partial types helps you write flexible and safe code in TypeScript, which is widely used in web development jobs.

1

Create the UserProfile interface and initial user

Create an interface called UserProfile with properties name (string), age (number), and email (string). Then create a variable called user of type UserProfile with name set to "Alice", age set to 30, and email set to "[e-mail]".

Typescript

// Your code here

Need a hint?

Use interface to define UserProfile. Then create user with exact property values.

2

Create a Partial update object

Create a variable called update of type Partial<UserProfile> with only the age property set to 31.

Typescript

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

const user: UserProfile = {
  name: "Alice",
  age: 30,
  email: "[e-mail]"
};

// Your code here

Need a hint?

Use Partial<UserProfile> to allow only some properties in update.

3

Write the updateUser function

Write a function called updateUser that takes two parameters: user of type UserProfile and update of type Partial<UserProfile>. The function should return a new UserProfile object with properties from user overwritten by properties from update.

Typescript

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

const user: UserProfile = {
  name: "Alice",
  age: 30,
  email: "[e-mail]"
};

const update: Partial = {
  age: 31
};

// Your code here

Need a hint?

Use object spread syntax { ...user, ...update } to combine objects.

4

Print the updated user profile

Call the updateUser function with user and update and print the result using console.log.

Typescript

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

const user: UserProfile = {
  name: "Alice",
  age: 30,
  email: "[e-mail]"
};

const update: Partial = {
  age: 31
};

function updateUser(user: UserProfile, update: Partial): UserProfile {
  return { ...user, ...update };
}

// Your code here

Need a hint?

Use console.log to print the updated user returned by updateUser.