Why utility types are needed in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code using Partial utility type?

Consider this TypeScript code snippet using the Partial utility type. What will be the output when running the compiled JavaScript?

Typescript

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

function updateUser(user: User, fieldsToUpdate: Partial<User>): User {
  return { ...user, ...fieldsToUpdate };
}

const user1: User = { name: "Alice", age: 30 };
const updatedUser = updateUser(user1, { age: 31 });
console.log(updatedUser);

A {"name":"Alice","age":31}

B {"name":"Alice"}

C TypeError at runtime

D {"age":31}

💡 Hint

Partial allows updating only some properties of an object.

The Partial utility type makes all properties optional, so you can pass only the fields you want to update. The function merges the original user with the updated fields, resulting in the age being updated to 31 while keeping the name unchanged.

🧠 Conceptual

intermediate

Why are utility types like Readonly useful in TypeScript?

Which of the following best explains why the Readonly utility type is needed in TypeScript?

A To make all properties of an object immutable, preventing accidental changes.

B To allow properties to be deleted from an object.

C To convert all properties to optional so they can be omitted.

D To automatically convert all properties to strings.

💡 Hint

Think about protecting data from being changed after creation.

Readonly makes all properties of a type immutable, which helps prevent bugs caused by accidental modification of objects that should not change.

❓ Predict Output

advanced

What is the output of this TypeScript code using Record utility type?

Given this TypeScript code using the Record utility type, what will be printed to the console?

Typescript

type Roles = "admin" | "user" | "guest";

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

console.log(rolePermissions.user.includes("delete"));

A TypeError at runtime

B true

C undefined

D false

💡 Hint

Check if the 'user' role has 'delete' permission in the array.

The 'user' role has permissions ['read', 'write'], so 'delete' is not included, resulting in false.

🔧 Debug

advanced

What error does this TypeScript code produce?

This code tries to use the Required utility type. What error will it cause?

Typescript

interface Config {
  url?: string;
  port?: number;
}

const config: Required<Config> = {
  url: "http://example.com"
};

A SyntaxError due to missing comma.

B Property 'port' is missing in type '{ url: string; }' but required in type 'Required<Config>'.

C TypeError at runtime because 'port' is undefined.

D No error, code compiles fine.

💡 Hint

Required makes all properties mandatory.

Required converts all optional properties to required, so 'port' must be provided. Missing it causes a compile-time error.

🚀 Application

expert

How many keys are in the resulting object after using Pick utility type?

Given this TypeScript code, how many keys does the object 'picked' have?

Typescript

interface Person {
  name: string;
  age: number;
  location: string;
  email: string;
}

const person: Person = {
  name: "Bob",
  age: 25,
  location: "NY",
  email: "[e-mail]"
};

const picked: Pick<Person, "name" | "email"> = {
  name: person.name,
  email: person.email
};

A 4

B 3

C 2

D 1

💡 Hint

Pick selects only specified keys from a type.

Pick creates a type with only 'name' and 'email' keys, so the object has 2 keys.

Practice

1. Why are utility types useful in TypeScript?

easy

A. They replace the need for interfaces and classes.

B. They automatically fix runtime errors in JavaScript code.

C. They help create new types by modifying existing ones without rewriting code.

D. They allow TypeScript to run faster during compilation.

Solution

1. Step 1: Understand utility types purpose

   Utility types let you create new types by transforming existing ones, saving time and effort.

2. Step 2: Compare other options

   Options B, C, and D describe incorrect or unrelated features; utility types do not fix runtime errors, replace interfaces/classes, or speed up compilation.

3. Final Answer:

   They help create new types by modifying existing ones without rewriting code. -> Option C

4. Quick Check:

   Utility types = modify types easily [OK]

Hint: Utility types change types without rewriting them [OK]

Common Mistakes:

• Thinking utility types fix runtime errors
• Confusing utility types with interfaces
• Believing utility types speed up compilation

2. Which of the following is the correct syntax to use the Partial utility type in TypeScript?

easy

A. type Partial<T> = { [P in keyof T]?: T[P] };

B. type Partial<T> = { [P in T]?: keyof T };

C. type Partial<T> = { [P in keyof T]: T[P] };

D. type Partial<T> = { [P in keyof T]?: keyof T };

Solution

1. Step 1: Recall Partial type definition

   Partial makes all properties optional by adding ? to each key in T using mapped types.

2. Step 2: Check each option's correctness

   type Partial<T> = { [P in keyof T]?: T[P] }; correctly uses [P in keyof T]?: T[P]. Others misuse keys or omit optional modifier.

3. Final Answer:

   type Partial<T> = { [P in keyof T]?: T[P] }; -> Option A

4. Quick Check:

   Partial syntax = mapped optional keys [OK]

Hint: Partial adds ? to all keys using mapped types [OK]

Common Mistakes:

• Omitting the optional modifier '?'
• Using wrong key iteration syntax
• Confusing keys and values in mapped types

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

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

type UserPreview = Pick;

const preview: UserPreview = { id: 1, name: 'Alice' };

medium

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

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

C. { id: number; age: number; }

D. { name: string; age: number; }

Solution

1. Step 1: Understand Pick utility type

   Pick creates a new type by selecting only specified keys from the original type.

2. Step 2: Apply Pick to User interface

   Pick results in a type with only 'id' and 'name' properties.

3. Final Answer:

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

4. Quick Check:

   Pick selects keys = {id, name} [OK]

Hint: Pick selects only specified keys from a type [OK]

Common Mistakes:

• Including keys not picked
• Confusing Pick with Omit
• Expecting all original properties

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

interface Config {
  url: string;
  timeout: number;
}

const config: Readonly<Config> = { url: 'api.com', timeout: 1000 };
config.timeout = 2000;

medium

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

B. Missing type annotation for 'config'.

C. Readonly utility type is not imported.

D. The object literal is missing required properties.

Solution

1. Step 1: Understand Readonly utility type effect

   Readonly makes all properties of a type immutable (cannot be changed after assignment).

2. Step 2: Analyze the assignment error

   Trying to assign a new value to config.timeout causes a compile-time error because it's read-only.

3. Final Answer:

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

4. Quick Check:

   Readonly blocks property reassignment [OK]

Hint: Readonly properties cannot be reassigned [OK]

Common Mistakes:

• Ignoring immutability of Readonly
• Assuming Readonly needs import
• Confusing Readonly with Partial

5. You want to create a new type from Product where all properties are optional except id which must remain required. Which utility types combination achieves this?

hard

A. type NewProduct = Omit & Pick;

B. type NewProduct = Required<Product> & Partial>;

C. type NewProduct = Omit & Partial<Product>;

D. type NewProduct = Partial> & Pick;

Solution

1. Step 1: Understand the goal

   Make all properties optional except 'id' which stays required.

2. Step 2: Analyze each option

   type NewProduct = Partial> & Pick; omits 'id' from Product, makes the rest partial (optional), then adds back 'id' as required using Pick.

3. Step 3: Why others fail

   type NewProduct = Omit & Pick; omits 'id' from Product but fails to apply Partial, keeping other properties required. type NewProduct = Required<Product> & Partial>; reverses required and partial incorrectly. type NewProduct = Omit & Partial<Product>; omits 'id' but then adds all properties partial, making 'id' missing.

4. Final Answer:

   type NewProduct = Partial<Omit<Product, 'id'>> & Pick<Product, 'id'>; -> Option D

5. Quick Check:

   Omit + Partial + Pick keeps 'id' required [OK]

Hint: Omit optional keys, then add required key back with Pick [OK]

Common Mistakes:

• Using Partial on whole type including required keys
• Confusing order of intersection types
• Forgetting to omit required keys before Partial