Partial type in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this code using Partial?

Consider the following TypeScript code using the Partial type. What will be logged to the console?

Typescript

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

function updateUser(user: User, updates: Partial<User>): User {
  return { ...user, ...updates };
}

const user1: User = { id: 1, name: "Alice", email: "[e-mail]" };
const updatedUser = updateUser(user1, { email: "[e-mail]" });
console.log(updatedUser);

A {"id":1,"name":"Alice","email":"[e-mail]"}

B {"id":1,"name":"Alice"}

C TypeScript compilation error

D {"email":"[e-mail]"}

💡 Hint

Partial allows you to provide some or all properties of the type.

The Partial type means the updates object can have zero or more properties of User. The updateUser function merges the original user with the updates, so only the email changes.

❓ Predict Output

intermediate

What error does this code raise?

What error will this TypeScript code produce?

Typescript

interface Product {
  id: number;
  name: string;
  price: number;
}

function setProductName(product: Partial<Product>, name: string) {
  product.name = name;
}

const p: Partial<Product> = {};
setProductName(p, "Book");
console.log(p.name.length);

A undefined

B SyntaxError

C TypeError: Cannot read property 'length' of undefined

D No error, outputs 4

💡 Hint

Objects are passed by reference in JavaScript/TypeScript, so the function mutates the original `p` object.

No runtime error occurs. The `Partial` type makes properties optional, but the `setProductName` function mutates `p` by setting `p.name = "Book"`. Thus, `p.name.length` is 4.

🔧 Debug

advanced

Why does this Partial type assignment cause an error?

This code causes a TypeScript error. Why?

Typescript

interface Settings {
  theme: string;
  notifications: boolean;
}

const defaultSettings: Settings = { theme: "dark", notifications: true };

const newSettings: Partial<Settings> = { theme: undefined };

const finalSettings: Settings = { ...defaultSettings, ...newSettings };

A Because 'theme' cannot be undefined in Settings, but newSettings sets it to undefined

B Because Partial does not allow undefined values

C Because spread operator cannot merge Partial types

D Because defaultSettings is missing a required property

💡 Hint

Check the type of 'theme' in Settings and what value is assigned in newSettings.

Partial makes properties optional but does not allow them to be explicitly undefined if the original type does not allow undefined. Setting theme to undefined causes a type error because Settings.theme expects a string, not undefined.

🧠 Conceptual

advanced

How does Partial affect nested objects?

Given the interface below, what does Partial do to the nested 'address' property?

Typescript

interface Address {
  street: string;
  city: string;
}

interface User {
  name: string;
  address: Address;
}

const partialUser: Partial<User> = { address: { city: "New York" } };

A Partial<User> makes 'address' required and its properties optional

B Partial<User> makes both 'address' and its properties optional

C Partial<User> makes 'address' optional but does not make its properties optional

D Partial<User> makes 'address' and its properties required

💡 Hint

Partial only applies to the top-level properties of the type.

Partial makes the 'address' property optional, but does not recursively make properties inside 'address' optional. So 'address' can be missing, but if present, it must have all Address properties.

🚀 Application

expert

How to create a recursive Partial type?

Which of the following TypeScript code snippets correctly defines a recursive Partial type that makes all nested properties optional?

A type DeepPartial<T> = Partial<T> & { [P in keyof T]: Partial<T[P]> };

B type DeepPartial<T> = { [P in keyof T]?: DeepPartial<T[P]> };

C type DeepPartial<T> = Partial<T> | { [P in keyof T]?: DeepPartial<T[P]> };

D type DeepPartial<T> = { [P in keyof T]: T[P] | undefined };

💡 Hint

Recursive mapped types use conditional or mapped types to apply Partial deeply.

Option B correctly defines DeepPartial recursively by making each property optional and applying DeepPartial to nested properties. Other options either combine types incorrectly or do not recurse properly.

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