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.