Why utility types are needed in Typescript - See It in Action

Why utility types are needed

📖 Scenario: Imagine you are building a simple app to manage user profiles. You want to store user information but sometimes you need only part of the data or want to change some properties without rewriting everything.

🎯 Goal: You will create a basic user type, then use utility types to create new types that pick or modify parts of the user data. This shows why utility types help save time and avoid mistakes.

📋 What You'll Learn

Create a User type with exact properties

Create a type UserPreview that picks only name and email from User

Create a type PartialUser that makes all User properties optional

Create a type ReadonlyUser that makes all User properties readonly

💡 Why This Matters

🌍 Real World

Utility types are used in real apps to handle data shapes flexibly, like updating user info or showing previews without copying all data.

💼 Career

Understanding utility types is important for TypeScript developers to write clean, maintainable, and error-free code efficiently.

1

Create the User type

Create a TypeScript type called User with these exact properties: id as number, name as string, email as string, and age as number.

Typescript

// Your code here

Hint

Use the type keyword to define a new type with the given properties and their types.

2

Create UserPreview type using Pick

Create a new type called UserPreview that uses the Pick utility type to select only the name and email properties from the User type.

Typescript

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

// Your code here

Hint

Use Pick<Type, Keys> to create a new type with only the selected keys from the original type.

3

Create PartialUser type using Partial

Create a new type called PartialUser that uses the Partial utility type to make all properties of User optional.

Typescript

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

type UserPreview = Pick;

// Your code here

Hint

Use Partial<Type> to make all properties optional in the new type.

4

Create ReadonlyUser type using Readonly and show example

Create a new type called ReadonlyUser that uses the Readonly utility type to make all properties of User readonly. Then create a constant user of type ReadonlyUser with id 1, name "Alice", email "[e-mail]", and age 30. Finally, print the user object using console.log.

Typescript

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

type UserPreview = Pick;

type PartialUser = Partial;

// Your code here

Hint

Use Readonly<Type> to make all properties readonly. Then create a constant object with the given values and print it.

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