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

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

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

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

Hint

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

Practice

1.

What does the Partial utility type do in TypeScript?

easy

A. Changes all properties to readonly

B. Makes all properties of a type required

C. Removes all properties from a type

D. Makes all properties of a type optional

Solution

1. Step 1: Understand the purpose of Partial

   The Partial type is designed to take an existing type and make all its properties optional.

2. Step 2: Compare with other utility types

   Unlike Required which makes all properties mandatory, Partial does the opposite by making them optional.

3. Final Answer:

   Makes all properties of a type optional -> Option D

4. Quick Check:

   Partial = optional properties [OK]

Hint: Partial makes properties optional, not required or readonly [OK]

Common Mistakes:

• Confusing Partial with Required
• Thinking Partial removes properties
• Assuming Partial makes properties readonly

2.

Which of the following is the correct syntax to create a partial type of User?

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

easy

A. type PartialUser = Partial<User>;

B. type PartialUser = User.Partial;

C. type PartialUser = Partial<User> = {};

D. type PartialUser = Partial<User> {};

Solution

1. Step 1: Recall correct Partial syntax

   The correct way to create a partial type is using Partial<Type> syntax.

2. Step 2: Check each option

   type PartialUser = Partial<User>; uses correct syntax. Options A, B, and D have invalid or incorrect TypeScript syntax.

3. Final Answer:

   type PartialUser = Partial<User>; -> Option A

4. Quick Check:

   Partial syntax = Partial<Type> [OK]

Hint: Use Partial<Type> to create partial types [OK]

Common Mistakes:

• Using dot notation instead of generic syntax
• Adding extra equals or braces incorrectly
• Confusing Partial with object literals

3.

What is the output of this TypeScript code?

interface Product { id: number; name: string; price: number; }
const updateProduct: Partial<Product> = { price: 99 };
console.log(updateProduct);

medium

A. { id: undefined, name: undefined, price: 99 }

B. { price: 99 }

C. Error: Missing properties id and name

D. {}

Solution

1. Step 1: Understand Partial effect on properties

   Partial makes all properties optional, so you can provide only some properties.

2. Step 2: Check the object assigned

   The object has only price: 99. This is valid and prints exactly that.

3. Final Answer:

   { price: 99 } -> Option B

4. Quick Check:

   Partial allows partial objects [OK]

Hint: Partial lets you omit properties safely [OK]

Common Mistakes:

• Expecting all properties to appear with undefined
• Thinking missing properties cause errors
• Assuming Partial creates empty objects

4.

Identify the error in this code snippet:

interface Settings { theme: string; fontSize: number; }
const newSettings: Partial<Settings> = { theme: 'dark' };
newSettings.fontSize.toFixed(2);

medium

A. Error: toFixed is not a function

B. No error, code runs fine

C. Error: fontSize might be undefined

D. Error: theme property missing

Solution

1. Step 1: Analyze Partial type effect

   Partial makes all properties optional, so fontSize may be undefined.

2. Step 2: Check method call on possibly undefined

   Calling toFixed on possibly undefined fontSize causes a runtime error.

3. Final Answer:

   Error: fontSize might be undefined -> Option C

4. Quick Check:

   Partial properties can be undefined [OK]

Hint: Check for undefined before using Partial properties [OK]

Common Mistakes:

• Ignoring optional property undefined possibility
• Assuming all properties exist
• Confusing method errors with type errors

5.

You have this interface and partial update function:

interface Profile { username: string; email: string; age: number; }
function updateProfile(profile: Profile, updates: Partial<Profile>): Profile {
  return { ...profile, ...updates };
}

What is the result of calling updateProfile({ username: 'alice', email: '[e-mail]', age: 30 }, { email: '[e-mail]' })?

hard

A. { username: 'alice', email: '[e-mail]', age: 30 }

B. { username: 'alice', email: '[e-mail]', age: 30 }

C. Error: Cannot spread Partial type

D. { email: '[e-mail]' }

Solution

1. Step 1: Understand spread with Partial

   The function merges the original profile with updates, overwriting provided fields.

2. Step 2: Apply the update

   The email field is replaced with the new value, others remain unchanged.

3. Final Answer:

   { username: 'alice', email: '[e-mail]', age: 30 } -> Option A

4. Quick Check:

   Spread merges updates over original [OK]

Hint: Spread merges partial updates over full object [OK]

Common Mistakes:

• Thinking Partial cannot be spread
• Expecting original email to remain
• Returning only updates without original fields