Combining utility types in Typescript - Mini Project: Build & Apply

Combining Utility Types in TypeScript

📖 Scenario: You are building a simple user management system. You want to create different versions of a user object by combining TypeScript utility types.

🎯 Goal: Learn how to combine utility types like Partial and Pick to create new types from an existing interface.

📋 What You'll Learn

Create an interface called User with exact properties

Create a type called PartialUser using Partial utility type

Create a type called UserNameAndEmail using Pick utility type

Create a type called PartialNameAndEmail by combining Partial and Pick

Print the types to verify their structure

💡 Why This Matters

🌍 Real World

In real projects, you often need to create new types based on existing ones to handle partial updates or select specific fields for forms or API responses.

💼 Career

Understanding how to combine utility types is important for writing clean, reusable, and type-safe code in TypeScript, which is widely used in frontend and backend development.

1

Create the User interface

Create an interface called User with these exact properties and types: id: number, name: string, email: string, age: number.

Typescript

// Your code here

Hint

Use the interface keyword and list all properties with their types inside curly braces.

2

Create the PartialUser type using Partial

Create a type called PartialUser that makes all properties of User optional by using the Partial utility type.

Typescript

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

// Your code here

Hint

Use type PartialUser = Partial; to make all properties optional.

3

Create the UserNameAndEmail type using Pick

Create a type called UserNameAndEmail that picks only the name and email properties from User using the Pick utility type.

Typescript

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

type PartialUser = Partial;

// Your code here

Hint

Use Pick to select only those two properties.

4

Create PartialNameAndEmail by combining Partial and Pick and print it

Create a type called PartialNameAndEmail by applying Partial to Pick. Then create a variable example of type PartialNameAndEmail with only the email property set to '[e-mail]'. Finally, print example using console.log.

Typescript

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

type PartialUser = Partial;

type UserNameAndEmail = Pick;

// Your code here

Hint

Use type PartialNameAndEmail = Partial>; and then create a variable with only the email property. Use console.log(example); to print.

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