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.