Partial & Required

Toggle all properties as optional or required.

TypeScript4 min readConcept 36 of 54

Batch Modifiers

Partial<T> takes an object type and returns a new type with every property marked as optional (?).

Required<T> does the exact opposite: it takes an object type and returns a new type with all optional modifiers stripped away.

The PATCH Scenario

Imagine a User type with 20 properties, all required to create a new user. But when you want to update a user (a PATCH request), you only need to send the fields that changed.

Instead of writing a second UpdateUserDTO interface where everything is optional, you can simply use Partial<User>.

Syntax

typescript interface Todo { title: string; description: string; } // Updating a Todo: we only need to provide some fields function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) { return { ...todo, ...fieldsToUpdate }; } // We can just pass the title! const updated = updateTodo(todo, { title: "New Title" });

Try it

Toggle the utility wrapper between Partial<T> and Required<T> to see how the compiler applies or removes the ? modifier across all properties simultaneously.

// The Base Type
interface User {
id: string;
name: string;
email?: string;
avatar?: string;
}

// The Payload
type Payload =User;
Resulting Shape
{
id?: string;
name?: string;
email?: string;
avatar?: string;
}

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1If `type User = { name: string, profile?: { age: number } }`, what happens to `age` when you use `Required<User>`?

Remember this

  • Partial<T> makes all top-level properties optional.
  • Required<T> makes all top-level properties required.
  • They are shallow—they do not affect nested objects.
  • They are implemented using mapped types under the hood.

Done with this concept?

Mark it complete to track your progress. No login needed.