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.