Why utility types are needed in Typescript - The Real Reasons

The Big Idea

Discover how a few simple tools can save you hours of tedious coding and bugs!

The Scenario

Imagine you have a big list of user data with many details, and you need to create new versions of this data with small changes, like making some fields optional or picking only a few properties.

The Problem

Doing this by hand means writing lots of repeated code for each variation. It's slow, easy to make mistakes, and hard to keep updated when the original data changes.

The Solution

Utility types let you create new types by transforming existing ones automatically. They save time, reduce errors, and keep your code clean and consistent.

Before vs After

✗ Before

type User = { name: string; age: number; email: string };
type PartialUser = { name?: string; age?: number; email?: string };

✓ After

type User = { name: string; age: number; email: string };
type PartialUser = Partial<User>;

What It Enables

Utility types make it easy to adapt and reuse types, unlocking faster and safer coding with less effort.

Real Life Example

When building a form, you can use utility types to create a version of your data where all fields are optional, so users can fill in only what they want.

Key Takeaways

Manual type changes are repetitive and error-prone.

Utility types automate type transformations.

This leads to cleaner, safer, and faster code.

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