Combining utility types in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Partial<T> utility type do in TypeScript?

It makes all properties of type T optional, allowing you to create objects with some or none of the properties defined.

beginner

How does Required<T> utility type affect a type T?

It makes all properties of T required, removing any optional modifiers from the properties.

intermediate

What is the result of combining Partial<T> and Readonly<T> as Readonly<Partial<T>>?

You get a type where all properties of T are optional and cannot be changed after creation (read-only).

beginner

Explain what Pick<T, K> does in TypeScript.

It creates a new type by selecting only the properties K from type T. Useful to focus on specific parts of a type.

intermediate

How can you combine Omit<T, K> and Partial<Pick<T, K>> to make only some properties optional?

You can create a type that keeps all properties except K as they are, and makes only the properties K optional by combining Omit<T, K> with Partial<Pick<T, K>> using intersection (&).

What does Readonly<Partial<T>> do to type T?

A Makes all properties optional and writable

B Makes all properties optional and read-only

C Makes all properties required and read-only

D Makes all properties required and writable

Combining Partial makes properties optional, and Readonly makes them read-only.

Which utility type would you use to select only some properties from a type?

A Pick

B Omit

C Partial

D Required

Pick selects specific properties from a type.

How do you make only certain properties optional in a type T?

A Use <code>Omit&lt;T, K&gt; &amp; Partial&lt;Pick&lt;T, K&gt;&gt;</code>

B Use <code>Omit&lt;T, K&gt; &amp;&amp; Partial&lt;Pick&lt;T, K&gt;&gt;</code>

C Use <code>Partial&lt;T&gt;</code>

D Use <code>Required&lt;T&gt;</code>

Combine Omit<T, K> with Partial<Pick<T, K>> using intersection (&) to make only properties K optional.

What does Required<Partial<T>> result in?

A All properties optional

B Conflicting types, results in all properties optional

C Conflicting types, results in all properties required

D All properties required

Required overrides Partial, so all properties become required.

Which utility type removes properties from a type?

A Partial

B Pick

C Omit

D Readonly

Omit creates a type by excluding specified properties.

Describe how you can combine utility types to create a type where some properties are optional and others are required.

Think about removing some properties and making only those optional.

Explain the difference between combining Partial<Readonly<T>> and Readonly<Partial<T>>.

Consider which properties become optional first and then read-only, or vice versa.

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