Combining utility types in Typescript - Step-by-Step Execution

Concept Flow - Combining utility types

Start with Base Type

↓

Apply Utility Type 1

↓

Apply Utility Type 2

↓

Resulting Combined Type

↓

Use Combined Type in Code

Start with a base type, apply one utility type, then another, resulting in a combined type used in code.

Execution Sample

Typescript

type User = {
  id: number;
  name: string;
  email?: string;
};

// Combine Required and Pick

type RequiredName = Required<Pick<User, 'name'>>;

This code picks the 'name' property from User and makes it required.

Execution Table

Step	Action	Type Expression	Resulting Type
1	Start with base type User	User	{ id: number; name: string; email?: string | undefined; }
2	Pick 'name' property	Pick<User, 'name'>	{ name: string; }
3	Make picked property required	Required<Pick<User, 'name'>>	{ name: string; }
4	Use combined type RequiredName	const user: RequiredName	user.name must be string, required
5	Assign valid value	user = { name: 'Alice' }	Valid assignment
6	Assign missing name	user = {}	Error: Property 'name' is missing

💡 Execution stops because missing required property causes a TypeScript error

Variable Tracker

Variable	Start	After Pick	After Required	Final
Type	User	Pick<User, 'name'>	Required<Pick<User, 'name'>>	RequiredName
Properties	{ id, name, email? }	{ name }	{ name }	{ name }

Key Moments - 2 Insights

Why does Required<Pick<User, 'name'>> still have only 'name' property?

Because Pick<User, 'name'> selects only the 'name' property from User, so Required only affects that single property, as shown in execution_table step 2 and 3.

What happens if we assign an object without 'name' to RequiredName?

TypeScript gives an error because 'name' is required in RequiredName, as shown in execution_table step 6.

Visual Quiz - 3 Questions

Look at the execution table, what is the type after applying Pick<User, 'name'>?

A { id: number; }

B { email?: string; }

C { name: string; }

D { id: number; name: string; }

💡 Hint

Check execution_table row 2 under Resulting Type column

At which step does the 'name' property become required?

A Step 3

B Step 2

C Step 1

D Step 5

💡 Hint

Look at execution_table step 3 where Required is applied

If we remove Required and only use Pick<User, 'name'>, what happens when 'name' is missing?

A No error, 'name' is optional

B Error, 'name' is required

C Error, 'name' is missing but optional

D TypeScript ignores missing properties

💡 Hint

Recall that Pick keeps original optionality, see variable_tracker Properties row

Concept Snapshot

Combining utility types:
- Start with a base type
- Use utility types like Pick<T, K> to select properties
- Use Required<T> to make properties required
- Combine them: Required<Pick<T, K>>
- Resulting type has selected properties required
- Useful for precise type transformations

Full Transcript

This visual execution shows how to combine TypeScript utility types. We start with a base type User with optional and required properties. We pick only the 'name' property using Pick<User, 'name'>, which keeps the original optionality. Then we apply Required to make 'name' required. The execution table traces each step, showing the resulting types. The variable tracker shows how properties change. Key moments clarify why the combined type has only 'name' and why missing 'name' causes an error. The quiz tests understanding of each step and property requirements. This helps beginners see how utility types combine to create new types.

Practice

1. Which utility type combination creates a type with all properties optional and readonly in TypeScript?

easy

A. Readonly<Partial<T>>

B. Required<Readonly<T>>

C. Pick<T, keyof T>

D. Omit<T, keyof T>

Solution

1. Step 1: Understand Partial and Readonly

   Partial<T> makes all properties optional, and Readonly<T> makes all properties readonly.

2. Step 2: Combine utility types correctly

   Wrapping Partial<T> inside Readonly<> makes all optional properties readonly as well.

3. Final Answer:

   Readonly<Partial<T>> -> Option A

4. Quick Check:

   Readonly + Partial = Readonly<Partial<T>> [OK]

Hint: Wrap Partial inside Readonly for optional readonly props [OK]

Common Mistakes:

• Reversing the order of Partial and Readonly
• Using Pick or Omit instead of Partial/Readonly
• Assuming Pick makes properties optional

2. Which of the following is the correct syntax to create a type that omits properties 'a' and 'b' from type T and makes the rest readonly?

easy

A. Partial<Omit<T, 'a' | 'b'>>

B. Omit<Partial<T>, 'a' | 'b'>

C. Readonly<Omit<T, 'a' | 'b'>>

D. Pick<Readonly<T>, 'a' | 'b'>

Solution

1. Step 1: Understand Omit and Readonly

   Omit<T, 'a' | 'b'> removes properties 'a' and 'b' from T. Readonly<> makes all properties readonly.

2. Step 2: Apply Readonly after Omit

   Applying Readonly to the result of Omit makes the remaining properties readonly.

3. Final Answer:

   Readonly<Omit<T, 'a' | 'b'>> -> Option C

4. Quick Check:

   Omit then Readonly = Readonly<Omit<T, 'a' | 'b'>> [OK]

Hint: Omit first, then wrap with Readonly for readonly filtered props [OK]

Common Mistakes:

• Applying Omit after Readonly (wrong order)
• Using Pick instead of Omit
• Forgetting to use quotes around property names

3. Given the type type T = { a: number; b: string; c: boolean; }, what is the resulting type of Partial<Pick<T, 'a' | 'c'>>?

medium

A. { a?: number; c?: boolean; }

B. { a: number; c: boolean; }

C. { a?: number; b?: string; c?: boolean; }

D. { b?: string; }

Solution

1. Step 1: Apply Pick to select properties

   Pick<T, 'a' | 'c'> selects only properties 'a' and 'c' from T.

2. Step 2: Apply Partial to make selected properties optional

   Partial<> makes 'a' and 'c' optional, so the type becomes { a?: number; c?: boolean; }.

3. Final Answer:

   { a?: number; c?: boolean; } -> Option A

4. Quick Check:

   Partial + Pick = optional picked props [OK]

Hint: Pick selects keys, Partial makes them optional [OK]

Common Mistakes:

• Including property 'b' which was not picked
• Forgetting Partial makes properties optional
• Assuming Partial affects all original properties

4. Identify the error in this type combination: type U = Partial<Readonly<Omit<T, 'x'>>>

medium

A. Partial cannot be applied to Readonly types

B. No error; the type combination is valid

C. Readonly should be applied after Partial for optional readonly props

D. Omit must be applied after Partial

Solution

1. Step 1: Analyze the order of utility types

   The type applies Omit first, removing property 'x', then Readonly to make remaining props readonly, then Partial to make them optional.

2. Step 2: Check if this order is valid

   This order is valid and results in optional readonly properties except 'x' which is omitted.

3. Final Answer:

   No error; the type combination is valid -> Option B

4. Quick Check:

   Omit -> Readonly -> Partial is valid [OK]

Hint: Utility types can be nested in any valid order [OK]

Common Mistakes:

• Thinking Partial cannot follow Readonly
• Assuming Omit must be last
• Confusing order of utility types

5. You want to create a type from T that has only properties 'id' and 'name' readonly, and all other properties optional. Which combination achieves this?

hard

A. Partial<Readonly<Pick<T, 'id' | 'name'>>> && Omit<T, 'id' | 'name'>

B. Pick<Readonly<T>, 'id' | 'name'> && Partial<Omit<T, 'id' | 'name'>>

C. Readonly<Pick<T, 'id' | 'name'>> && Partial<Omit<T, 'id' | 'name'>>

D. Readonly<Pick<T, 'id' | 'name'>> & Partial<Omit<T, 'id' | 'name'>>

Solution

1. Step 1: Make 'id' and 'name' readonly

   Use Readonly<Pick<T, 'id' | 'name'>> to select and make these properties readonly.

2. Step 2: Make all other properties optional

   Use Partial<Omit<T, 'id' | 'name'>> to make the rest optional.

3. Step 3: Combine with intersection (&)

   Use intersection & to merge both types into one.

4. Final Answer:

   Readonly<Pick<T, 'id' | 'name'>> & Partial<Omit<T, 'id' | 'name'>> -> Option D

5. Quick Check:

   Readonly Pick & Partial Omit = desired type [OK]

Hint: Use intersection of Readonly Pick and Partial Omit [OK]

Common Mistakes:

• Using logical AND (&&) instead of intersection (&)
• Applying Partial to readonly properties
• Omitting intersection operator