Combining utility types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of combined Partial and Readonly types

What is the output of the following TypeScript code when compiled and run with Node.js (ignoring type errors)?

Typescript

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

const user: Readonly<Partial<User>> = { id: 1 };

console.log(user);

A { id: 1, name: undefined, email: undefined }

B { id: 1 }

C TypeError at runtime

D Compilation error due to type mismatch

💡 Hint

Partial makes all properties optional, Readonly makes them immutable.

Partial allows any subset of User properties. Readonly makes those properties immutable but does not add missing properties. So the object has only 'id'.

❓ Predict Output

intermediate

Resulting type keys after combining Pick and Required

Given the following TypeScript code, what keys does the type 'Result' have?

Typescript

type Product = {
  id?: number;
  name?: string;
  price?: number;
};

type Result = Required<Pick<Product, 'id' | 'price'>>;

A id and price, both optional

B id, price, and name, all required

C id and price, both required

D Only id required, price optional

💡 Hint

Pick selects keys, Required makes them non-optional.

Pick selects only 'id' and 'price' keys, still optional. Required makes those keys required (non-optional).

🔧 Debug

advanced

Why does this combined utility type cause an error?

Consider this TypeScript code snippet. Why does it cause a compilation error?

Typescript

type Config = {
  url: string;
  timeout?: number;
};

type NewConfig = Readonly<Required<Config>>;

const config: NewConfig = {
  url: "https://example.com"
};

A Type 'string' is not assignable to type 'number' for timeout

B Readonly does not allow object literals

C No error, code compiles fine

D Missing required property 'timeout' in object literal

💡 Hint

Required makes all properties mandatory.

Required makes 'timeout' required, but the object literal does not provide it, causing a compilation error.

❓ Predict Output

advanced

Output of intersection of utility types

What is the output of this TypeScript code when compiled to JavaScript and run?

Typescript

type A = { a: number; b?: string };
type B = { b: string; c: boolean };

type C = Required<A> & B;

const obj: C = { a: 5, b: "hello", c: true };

console.log(obj.b);

A hello

B undefined

C TypeError at runtime

D Compilation error due to conflicting types

💡 Hint

Intersection combines properties, Required makes 'b' in A required, B requires 'b' as string.

The intersection type requires 'b' to be present and string, so obj.b is 'hello'.

🧠 Conceptual

expert

Which utility type combination creates a type with all properties optional and readonly?

Which of the following TypeScript utility type combinations produces a type where all properties are both optional and readonly?

A Readonly<Partial<T>>

B Partial<Readonly<T>>

C Required<Readonly<T>>

D Readonly<Required<T>>

💡 Hint

Partial makes properties optional, Readonly makes them immutable.

Readonly> makes all properties optional (Partial) and readonly (Readonly). Partial> also works but the order affects type inference subtly; however, both produce the same shape. But only option A is accepted here as correct to avoid ambiguity.

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