Understanding Utility Types in TypeScript

Utility types in TypeScript are powerful tools that facilitate type manipulation and enhance code maintainability. They allow developers to create new types based on existing ones without duplicating type definitions. In this blog, we will explore various utility types provided by TypeScript, their definitions, code examples, and practical usage areas.

TypeScript, Utility Types, Programming, Web Development, Software Engineering

What are Utility Types and Why Do We Need Them?

Utility types are predefined generic types in TypeScript that enable the transformation of existing types into new variants. They simplify common type manipulations such as making properties optional, extracting specific properties, or filtering out certain types. By using utility types, developers can create more flexible and reusable code while maintaining type safety.

Benefits of Using Utility Types:

• Code Reusability: Avoids duplication of type definitions.

• Type Safety: Ensures that the resulting types adhere to the expected structure.

• Enhanced Readability: Makes the code easier to understand and maintain.

Exploring Utility Types

1. Partial

Definition: The Partial utility type constructs a type with all properties of the provided type set to optional.

Code Example:

interface Point {
  x: number;
  y: number;
}

let pointPart: Partial<Point> = {}; // x and y are optional
pointPart.x = 10; // Valid

Usage Area: Useful in scenarios like form submissions where not all fields need to be filled.

2. Pick

Definition: The Pick utility type constructs a type by picking a set of properties from another type.

Code Example:

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

const bob: Pick<Person, 'name'> = {
  name: 'Bob' // Only name is included
};

Usage Area: Ideal for creating simplified versions of complex types when only specific properties are needed.

3. Omit

Definition: The Omit utility type constructs a type by excluding a set of properties from another type.

Code Example:

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

const bob: Omit<Person, 'age' | 'location'> = {
  name: 'Bob' // age and location are omitted
};

Usage Area: Useful when you want to create a new type without certain properties.

4. Readonly

Definition: The Readonly utility type constructs a type with all properties as readonly.

Code Example:

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

const person: Readonly<Person> = {
  name: "Dylan",
  age: 35,
};

// person.name = 'Israel'; // Error: Cannot assign to 'name' because it is a read-only property.

Usage Area: When you need to ensure that an object’s properties cannot be modified after creation.

5. Record

Definition: The Record utility type constructs an object type with specified keys and values.

Code Example:

type Fruit = 'apple' | 'banana' | 'orange';
type Inventory = Record<Fruit, number>;

const inventory: Inventory = {
  apple: 10,
  banana: 5,
  orange: 0,
};

Usage Area: Useful for creating structured mappings between keys and values, such as inventory systems.

6. Exclude

Definition: The Exclude utility type constructs a type by excluding specific types from a union.

Code Example:

type Primitive = string | number | boolean;

const value: Exclude<Primitive, string> = true; // Only number and boolean are allowed

Usage Area: Helpful in designing functions that should accept only certain primitive types.

7. Extract

Definition: The Extract utility type constructs a type by extracting specific types from a union.

Code Example:

type Primitive = string | number | boolean;

const value: Extract<Primitive, string> = "Hello"; // Only strings are allowed

Usage Area: Useful for narrowing down types when working with unions.

8. Awaited

Definition: The Awaited utility type unwraps the value of a promise.

Code Example:

type PromiseType = Promise<number>;
type UnwrappedType = Awaited<PromiseType>; // UnwrappedType is number

Usage Area: Essential when you need to work with the resolved value of promises in asynchronous programming.

9. Parameters

Definition: The Parameters utility extracts the parameter types of a function as a tuple.

Code Example:

type PointPrinter = (p: { x: number; y: number; }) => void;

const pointParams: Parameters<PointPrinter> = [{ x: 10, y: 20 }];

Usage Area: Useful for extracting function parameter types for further manipulation or validation.

10. NonNullable

Definition: The NonNullable utility constructs a type by excluding null and undefined from another type.

Code Example:

type NullableString = string | null | undefined;
type NonNullableString = NonNullable<NullableString>; // NonNullableString is just string

Usage Area: Important when you want to ensure that variables do not hold null or undefined values.

11. ReturnType

Definition: The ReturnType utility extracts the return type of a function.

Code Example:

type PointGenerator = () => { x: number; y: number; };

const point: ReturnType<PointGenerator> = { x: 10, y: 20 };

Usage Area: Useful for determining what a function returns without manually specifying the return type.

12. InstanceType

Definition: The InstanceType utility extracts the instance type from a constructor function.

Code Example:

class User {
  constructor(public name: string) {}
}

type UserInstance = InstanceType<typeof User>; // UserInstance is User

Usage Area: Helpful when you want to create variables that should be instances of classes without explicitly defining them again.

Summary

Utility types in TypeScript provide developers with powerful tools for manipulating and transforming types efficiently. By leveraging these built-in types, you can enhance code quality, improve maintainability, and ensure better adherence to expected structures in your applications.

📙Resource: https://roadmap.sh/typescript