TypeScript Utility Types

Introduction to Utility Types

In TypeScript utility types are installed type operators that assist developers in adjusting and converting current types. These tools simplify the development of effective and intricate data structures enhancing code organization and comprehension.

Popular Utility Types

Partial<Type>

The Partial type allows developers to create a new type where all properties of the original type are optional. This is useful when working with objects where some properties might not always be present.

Pick<Type, Keys>

The Pick type enables the creation of a new type by selecting specific properties from the original type. This reduces complexity and makes the code more efficient by only including the necessary properties.

Omit<Type, Keys>

The Omit type is the opposite of Pick. It creates a new type by excluding specific properties from the original type. This is helpful when you want to simplify objects by removing unneeded properties.

Importance of Utility Types

Using utility types enhances both code readability and type safety. They allow developers to express precise type constraints, reducing runtime errors and improving the development process.

ReturnType Utility Type

Explanation of ReturnType

The ReturnType utility type lets developers access the return type of a function without invoking it. This feature is useful for handling complex return types that TypeScript might not easily infer.

How to Use ReturnType

To use ReturnType, apply it to a function type with the syntax ReturnType<typeof functionName>. This retrieves the return type of the specified function.

Examples

function add(a: number, b: number): number {
  return a + b;
}

type AddReturnType = ReturnType<typeof add>; // number

Object Types and Utility Types

Object Manipulation Utility Types

TypeScript offers several utility types for manipulating object types:

  • Partial: Makes all properties optional.
  • Required: Makes all properties mandatory.
  • Readonly: Makes all properties read-only.
  • Pick: Selects specific properties.
  • Omit: Excludes specific properties.
  • Record: Creates an object type from specified keys and values.

How to Manipulate Object Types

Here's how you can define and manipulate object types using utility types:

interface User {
  id: number;
  name: string;
  email?: string;
}

type PartialUser = Partial<User>;
type RequiredUser = Required<User>;
type ReadonlyUser = Readonly<User>;
type UserIdAndName = Pick<User, 'id' | 'name'>;
type UserWithoutEmail = Omit<User, 'email'>;

Function Types

Function Type Basics

Function types describe the structure and behavior of functions. They specify the types of parameters a function expects and the type of value it will return.

Using Utility Types with Function Types

TypeScript provides utility types like Parameters and ReturnType to capture and manipulate the types of a function's parameters and return values.

Example

function multiply(a: number, b: number): number {
  return a * b;
}

type MultiplyParams = Parameters<typeof multiply>; // [number, number]
type MultiplyReturnType = ReturnType<typeof multiply>; // number

Union Type

Definition and Usage

A Union Type allows a variable or function parameter to accept multiple types. It is represented by the | symbol.

Combining Types with Union Type

You can create a Union Type by combining multiple types:

type StringOrNumber = string | number;

Common Utility Types

  • Partial
  • Pick
  • Omit
  • Readonly
  • Record

By using these tools, developers can create more flexible and maintainable code.

Written by

Master Frontend by choosing your ideal learning course

View all courses

Create a free account to access the full topic

Sign up with Google
Sign up with Google
Sign up with JetBrains
Sign up with JetBrains
Sign up with Github
Sign up with GitHub
Coding thrill starts at Hyperskill
I've been using Hyperskill for five days now, and I absolutely love it compared to other platforms. The hands-on approach, where you learn by doing and solving problems, really accelerates the learning process.
Aryan Patil
Reviewed us on