Why utility types are needed in Typescript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a type that makes all properties optional.

Typescript

type PartialUser = [1]<User>;

Drag options to blanks, or click blank then click option'

ARequired

BReadonly

CPartial

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Using Required instead of Partial, which makes all properties required.

Using Readonly which makes properties immutable, not optional.

The Partial utility type makes all properties of a type optional.

2fill in blank

medium

Complete the code to create a type that makes all properties required.

Typescript

type CompleteUser = [1]<User>;

Drag options to blanks, or click blank then click option'

APartial

BPick

CReadonly

DRequired

Attempts:

3 left

💡 Hint

Common Mistakes

Using Partial which makes properties optional instead of required.

Using Readonly which only changes mutability.

The Required utility type makes all properties of a type required.

3fill in blank

hard

Fix the error in the code to create a type with only the 'name' property from User.

Typescript

type UserName = [1]<User, 'name'>;

Drag options to blanks, or click blank then click option'

ARequired

BPick

CPartial

DOmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using Omit which excludes properties instead of selecting.

Using Partial or Required which change optionality, not selection.

The Pick utility type selects specific properties from a type.

4fill in blank

hard

Fill both blanks to create a type that excludes 'password' and makes remaining properties readonly.

Typescript

type SafeUser = [1]<[2]<User, 'password'>>;

Drag options to blanks, or click blank then click option'

AReadonly

BPartial

COmit

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Reversing the order of utility types.

Using Pick instead of Omit which selects properties instead of excluding.

First, Omit removes the 'password' property, then Readonly makes the rest immutable.

5fill in blank

hard

Fill all three blanks to create a type that makes 'email' optional, picks 'name' and 'email', and makes them readonly.

Typescript

type CustomUser = [1]<[2]<User, 'name' | 'email'>> & { email?: [3] };

Drag options to blanks, or click blank then click option'

AReadonly

BPick

Cstring

DPartial

Attempts:

3 left

💡 Hint

Common Mistakes

Using Partial instead of Pick for selection.

Not overriding 'email' to be optional.

We pick 'name' and 'email', make them readonly, and then override 'email' to be optional with type string.

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