Why advanced utility types matter in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code using utility types?

Consider this TypeScript code using Partial and Required utility types. What will be the output when running the code?

Typescript

type Person = {
  name: string;
  age?: number;
};

const partialPerson: Partial<Person> = { name: "Alice" };
const requiredPerson: Required<Person> = { name: "Bob", age: 30 };

console.log(partialPerson.age);
console.log(requiredPerson.age);

A 30\n30

B undefined\n30

C undefined\nundefined

D Error: Property 'age' is missing in type '{ name: string; }' but required in type 'Required<Person>'

💡 Hint

Think about what Partial and Required do to the properties of a type.

Partial makes all properties optional, so age can be missing and is undefined. Required makes all properties required, so age must be present and is 30.

🧠 Conceptual

intermediate

Why use the Pick utility type?

Which of the following best explains why the Pick utility type is useful in TypeScript?

A It converts all properties of a type to readonly.

B It removes all optional properties from a type.

C It creates a new type by selecting specific properties from an existing type.

D It merges two types into one.

💡 Hint

Think about how you can create smaller types from bigger ones.

Pick lets you create a new type by choosing only some properties from another type, which helps keep code focused and safe.

🔧 Debug

advanced

What error does this TypeScript code produce?

Look at this code using Record utility type. What error will TypeScript show?

Typescript

type Roles = 'admin' | 'user';

const rolePermissions: Record<Roles, string[]> = {
  admin: ['read', 'write'],
  user: ['read'],
  guest: ['read']
};

A Error: Object literal may only specify known properties, and 'guest' does not exist in type 'Record<Roles, string[]>'

B No error, code compiles fine.

C Error: Missing property 'user' in object.

D Error: Type 'string[]' is not assignable to type 'string'.

💡 Hint

Check if all keys in the object match the keys in the Record type.

Record requires exactly the keys specified. 'guest' is not part of 'Roles', so TypeScript errors.

📝 Syntax

advanced

Which option correctly uses the Exclude utility type?

Given type T = 'a' | 'b' | 'c', which option correctly excludes 'b' from T?

A type U = Exclude<'b', T>; // 'a' | 'c'

B type U = Exclude<T, 'd'>; // 'a' | 'b' | 'c'

C type U = Exclude<T, 'a' | 'c'>; // 'b'

D type U = Exclude<T, 'b'>; // 'a' | 'c'

💡 Hint

Remember the order of parameters in Exclude: first is the union, second is what to remove.

Exclude removes 'b' from T, leaving 'a' | 'c'. Other options either reverse parameters or exclude wrong values.

🚀 Application

expert

How many properties does this mapped type have?

Given this code, how many properties does the type Flags have?

Typescript

type Keys = 'featureA' | 'featureB' | 'featureC';

type Flags = {
  [K in Keys as K extends 'featureB' ? never : K]: boolean;
};

A 2

B 3

C 1

D 0

💡 Hint

Look at the conditional key remapping in the mapped type.

The mapped type excludes 'featureB' by mapping it to never, so only 'featureA' and 'featureC' remain, totaling 2 properties.

Practice

1. What is the main benefit of using advanced utility types in TypeScript?

easy

A. They replace the need for interfaces entirely.

B. They make your code run faster at runtime.

C. They automatically generate UI components.

D. They allow you to modify existing types without rewriting them.

Solution

1. Step 1: Understand the purpose of utility types

   Utility types help transform or modify existing types without rewriting the whole type from scratch.

2. Step 2: Compare options to the purpose

   Only They allow you to modify existing types without rewriting them. correctly states this benefit. Options B, C, and D describe unrelated features.

3. Final Answer:

   They allow you to modify existing types without rewriting them. -> Option D

4. Quick Check:

   Advanced utility types = modify types easily [OK]

Hint: Utility types change types without rewriting [OK]

Common Mistakes:

• Thinking utility types affect runtime speed
• Confusing utility types with UI generation
• Believing utility types replace interfaces

2. Which of the following is the correct syntax to make all properties of a type optional using a utility type?

easy

A. type PartialType = Readonly<MyType>;

B. type PartialType = Required<MyType>;

C. type PartialType = Partial<MyType>;

D. type PartialType = Pick<MyType>;

Solution

1. Step 1: Recall utility types for property modifiers

   Partial<T> makes all properties optional, Required<T> makes all required, Readonly<T> makes all readonly, Pick<T> selects properties.

2. Step 2: Match syntax to making properties optional

   Partial<MyType> is the correct syntax to make all properties optional.

3. Final Answer:

   type PartialType = Partial<MyType>; -> Option C

4. Quick Check:

   Partial = optional properties [OK]

Hint: Partial makes all properties optional [OK]

Common Mistakes:

• Using Required instead of Partial
• Confusing Readonly with Partial
• Using Pick without specifying keys

3. What will be the output type of this code?

type User = { id: number; name: string; age?: number };
type RequiredUser = Required<User>;

medium

A. { id: number; name: string; age?: number }

B. { id: number; name: string; age: number }

C. { id?: number; name?: string; age?: number }

D. Error: Cannot use Required on User

Solution

1. Step 1: Understand Required utility type

   Required<T> makes all properties required, removing optional modifiers.

2. Step 2: Apply Required to User type

   Original age property was optional (age?), after Required it becomes required (age: number).

3. Final Answer:

   { id: number; name: string; age: number } -> Option B

4. Quick Check:

   Required removes optional marks [OK]

Hint: Required makes all properties mandatory [OK]

Common Mistakes:

• Thinking Required keeps optional properties
• Confusing Required with Partial
• Expecting a runtime error

4. Identify the error in this TypeScript code using utility types:

type Person = { name: string; age: number };
type ReadonlyPerson = Readonly<Person>;
const readonlyPerson: ReadonlyPerson = { name: "Bob", age: 30 };
readonlyPerson.name = "Alice";

medium

A. Cannot assign to 'name' because it is a read-only property.

B. Missing semicolon after type declaration.

C. Readonly utility type is not imported.

D. Person type must have optional properties.

Solution

1. Step 1: Understand Readonly utility type effect

   Readonly<T> makes all properties read-only, so they cannot be reassigned.

2. Step 2: Analyze the assignment to readonlyPerson.name

   Trying to assign "Alice" to a read-only property causes a TypeScript error.

3. Final Answer:

   Cannot assign to 'name' because it is a read-only property. -> Option A

4. Quick Check:

   Readonly properties cannot be reassigned [OK]

Hint: Readonly properties cannot be changed [OK]

Common Mistakes:

• Ignoring read-only restrictions
• Assuming utility types need imports
• Thinking optional properties are required

5. Given this nested type, how can you create a new type that makes the properties of the 'contact' object optional while keeping 'username' required?

type Profile = {
  username: string;
  contact: {
    email: string;
    phone: string;
  };
};

hard

A. type NewProfile = { username: string; contact: Partial<{ email: string; phone: string; }> };

B. type NewProfile = Partial<Profile>;

C. type NewProfile = Required<Profile>;

D. type NewProfile = { username?: string; contact?: { email?: string; phone?: string } };

Solution

1. Step 1: Identify the target properties to make optional

   The properties inside 'contact' should be optional; 'username' remains required.

2. Step 2: Use Partial on the nested 'contact' object

   Applying Partial to 'contact' makes all its properties optional, so we use Partial only on 'contact' type, keeping 'username' required.

3. Final Answer:

   type NewProfile = { username: string; contact: Partial<{ email: string; phone: string; }> }; -> Option A

4. Quick Check:

   Partial on nested object = optional nested props [OK]

Hint: Use Partial only on nested object to make some props optional [OK]

Common Mistakes:

• Making entire Profile partial instead of nested
• Using Required which makes all required
• Making all top-level properties optional