TypeScript : Utility Types

Introduction to Utility Types

Utility types in TypeScript allow you to transform existing types into new ones by including, excluding, or modifying properties. This can be incredibly useful when you need to create type definitions that are tailored to specific use cases without duplicating code.

Using ReturnType and Awaited in TypeScript

When working with TypeScript, you might often need to determine the return type of a function. TypeScript provides a handy utility type called ReturnType for this purpose. Let’s walk through how to use it, including handling asynchronous functions.

1. Getting the Return Type of a Function

To get the return type of a function, you can use the ReturnType utility type. Here’s an example:

function foo(): string {
    const something: string = "";
    return something;
}

async function fooWithAsync(): Promise<string> {
    const something: string = "";
    return something;
}

In this example:

The foo function returns a string.

ReturnType : extracts the return type of foo, which is string.

2. Handling Asynchronous Functions

When dealing with asynchronous functions, the return type is a Promise. Here’s an example:

type MyReturnType = ReturnType<typeof foo>

In this example:

The fooWithAsync function returns a Promise that resolves to a string.

ReturnType extracts the return type, which is Promise.

3. Using Awaited for Asynchronous Functions

If you want to get the resolved type of the Promise returned by an asynchronous function, you can use the Awaited utility type. Here’s how:

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

In this example:

ReturnType gives Promise.

Awaited<ReturnType<typeof fooWithAsync>> 
//resolves the Promise to its underlying type, which is string.`

Summary:

ReturnType: Extracts the return type of a function.
Awaited: Resolves the type of a Promise.

export const getEvents = async (user: User): Promise<ApiResponse> => {
    const eventsApiUrl: string = `${PROMOS_END_POINTS.EVENTS}`;
    const apiInstance: AxiosInstance = getAxiosInstance(user, API_SERVICES.PROMOTIONS);
    const response: AxiosResponse = await apiInstance.get(eventsApiUrl);
    return response.data;
};

type OfferEvent = Awaited<ReturnType<typeof getEvents>>;

const initEvent: OfferEvent = { event: [] };

By combining these utility types, you can effectively determine the return types of both synchronous and asynchronous functions in TypeScript.

Extracting Return Types with Conditional Types in TypeScript

In TypeScript, you can use conditional types and type inference to dynamically extract the return type from a function type. This is particularly useful for creating flexible and reusable type utilities. Let’s explore how this works with the MyReturnTypeWithCondition type alias.

type MyReturnTypeWithCondition<T> = T extends (...args: any[]) => infer R ? R : never;

Breaking It Down

Conditional Check: T extends (...args: any[]) => infer R

• This part checks if T is a function type.
• The ...args: any[] syntax matches any function signature.
• The infer R keyword captures the return type of the function into a type variable R.

Result: ? R : never

• If T is a function type, the type alias resolves to R, the return type of the function.
• If T is not a function type, it resolves to never.

Practical Example

Consider the following example to see this in action:

type ExampleFunction = (x: number, y: string) => boolean;
type ReturnType = MyReturnTypeWithCondition<ExampleFunction>; 
// ReturnType will be boolean

In above example, ReturnType will be boolean because
Example Function is a function type that returns a boolean. If you use a non-function type, ReturnType will be never.

This approach allows you to create highly adaptable type utilities that can infer and manipulate types based on their structure. It’s a powerful feature of TypeScript that enhances type safety and code maintainability.

Combining and Prettifying Types in TypeScript

When working with TypeScript, you often need to combine multiple types or interfaces to create more complex structures. This can sometimes result in types that are difficult to read and manage. This document will explore how to combine two types, make nested types prettier, and check if merged types are equal.

1. Combining Two Types

Combining two types in TypeScript is a common task. You can achieve this using intersection types (&). Let’s say you have two interfaces, OfferSummaryWithoutConfig and OfferTypeConfiguration, and you want to combine them.

export interface OfferSummaryWithoutConfig {
  id: string;
  auditInfo: AuditInfo;
  offerBasicInfo: OfferBasicInfo;
  metaData: MetaData;
  conditionGroupsSummary: ConditionGroupsSummary[];
  rewardGroupsSummary: RewardGroupsSummary[];
  userOperations: ActionPermission;
}

export interface OfferTypeConfiguration {
  id: number;
  name: string;
  description: string;
  configuration: Configuration;
}

You can combine these two interfaces using the intersection type (&):

type CombinedType = OfferSummaryWithoutConfig & {
  offerTypeConfiguration: OfferTypeConfiguration;
};

This creates a new type that includes all the properties from both OfferSummaryWithoutConfig and OfferTypeConfiguration.

2. Prettifying Nested Types

When you merge types, the resulting type can sometimes look messy and hard to read. To make these types more readable, you can use a utility type called Prettify.

type Prettify<T> = {[K in keyof T]: T[K]};

This utility type iterates over the keys of the type T and reconstructs it, making the type definition cleaner and easier to read.

After combining the types, you can use the Prettify utility type to clean up the resulting type

type ViewSummaryWithConfiguration = Prettify<CombinedType>;

3. Checking if Merged Types are Equal

To ensure that the merged type is exactly what you expect, you can use utility types to check if two types are identical, exact, or equal.

IsExact: Checks if two types are exactly the same.

type IsExact<T, U> = [T] extends [U] ? ([U] extends [T] ? true : false) : false;

IsIdentical: Uses conditional types to compare two types.

type IsIdentical<T, U> = T extends U ? (U extends T ? true : false) : false;

IsEqual: Ensures that both types have the same keys.

type IsEqual<T, U> = keyof T extends keyof U ? (keyof U extends keyof T ? true : false) : false;

You can use these utility types to check if CombinedType is identical, exact, or equal to another type OfferSummary.

To enforce these checks at compile time, you can use the Assert type:

type Assert<T extends true> = T;
type Test1 = Assert<checkIsIdentical>; // true checked on compile time
type Test2 = Assert<checkIsExact>; // true checked on compile time
type Test3 = Assert<checkIsEqual>; // true checked on compile time

Practical Example

Let’s put it all together with a practical example:

// Define the interfaces
export interface OfferSummaryWithoutConfig {
  id: string;
  auditInfo: AuditInfo;
  offerBasicInfo: OfferBasicInfo;
  metaData: MetaData;
  conditionGroupsSummary: ConditionGroupsSummary[];
  rewardGroupsSummary: RewardGroupsSummary[];
  userOperations: ActionPermission;
}

export interface OfferTypeConfiguration {
  id: number;
  name: string;
  description: string;
  configuration: Configuration;
}

// Combine the interfaces
type CombinedType = OfferSummaryWithoutConfig & {
  offerTypeConfiguration: OfferTypeConfiguration;
};

// Prettify the combined type
type ViewSummaryWithConfiguration = Prettify<CombinedType>;

// Example usage
const example: ViewSummaryWithConfiguration = {
  id: '123',
  auditInfo: { /* ... */ },
  offerBasicInfo: { /* ... */ },
  metaData: { /* ... */ },
  conditionGroupsSummary: [ /* ... */ ],
  rewardGroupsSummary: [ /* ... */ ],
  userOperations: { /* ... */ },
  offerTypeConfiguration: {
    id: 1,
    name: 'Special Offer',
    description: 'A special offer configuration',
    configuration: { /* ... */ }
  }
};

Conclusion

By using the Prettify utility type, you can make your nested types more readable and manageable. Combining types using intersection types (&) allows you to create complex structures that are easy to work with. Additionally, using utility types like IsExact, IsIdentical, and IsEqual helps ensure that your merged types are exactly what you expect.

Using TypeScript Utility Types: Pick, Omit, Readonly, and Partial

TypeScript offers a powerful set of utility types that can help you create more flexible and reusable type definitions. We’ll explore four essential utility types: Pick, Omit, Readonly, and Partial. We’ll use a practical example from an e-commerce application to illustrate how these utilities can be applied in real-world scenarios.

Let’s start with a Product interface that we’ll use throughout this blog post:

interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  category: string;
  stock: number;
  createdAt: Date;
  updatedAt: Date;
} 

Using Pick for Product Summaries

Use Case: Displaying a product summary on the product listing page.

The Pick utility type allows you to create a new type by selecting specific properties from an existing type. This is useful when you only need a subset of properties.

Example:

type ProductSummary = Pick<Product, 'id' | 'name' | 'price'>;
// ProductSummary will only have 'id', 'name', and 'price' properties

const productSummary: ProductSummary = {
  id: 1,
  name: "Laptop",
  price: 999.99
};

// This type is used to display a brief summary of products on the listing page.

Using Omit for Product Forms

Use Case: Creating a product form for adding new products, where certain fields are auto-generated.

The Omit utility type allows you to create a new type by excluding specific properties from an existing type. This is useful when certain properties are not needed in a particular context.

Example:

type ProductForm = Omit<Product, 'id' | 'createdAt' | 'updatedAt'>;
// ProductForm will have all properties of Product except 'id', 'createdAt', and 'updatedAt'

const newProductForm: ProductForm = {
  name: "Laptop",
  description: "A high-end gaming laptop",
  price: 999.99,
  category: "Electronics",
  stock: 50
};

// This type is used for the product creation form where 'id', 'createdAt', and 'updatedAt' are not needed.

Using Readonly for Immutable Product Details

Use Case: Ensuring product details cannot be modified after being fetched from the database.

The Readonly utility type makes all properties of a type read-only, meaning they cannot be changed after being set. This is useful for creating immutable objects.

Example:

type ReadonlyProduct = Readonly<Product>;
// ReadonlyProduct will have all properties of Product, but they will be read-only

const product: ReadonlyProduct = {
  id: 1,
  name: "Laptop",
  description: "A high-end gaming laptop",
  price: 999.99,
  category: "Electronics",
  stock: 50,
  createdAt: new Date(),
  updatedAt: new Date()
};

// This will cause an error because the properties are read-only
// product.price = 899.99;

// This type is used to ensure that product details fetched from the database are not modified accidentally.

Using Partial for Product Updates

Use Case: Updating product details where only some fields might be changed.

The Partial utility type makes all properties of a type optional. This is useful when you need to create a type for objects where not all properties are required.

Example:

type PartialProduct = Partial<Product>;
// PartialProduct will have all properties of Product, but they will be optional

const productUpdate: PartialProduct = {
  price: 899.99,
  stock: 45
};

// This type is used for the product update form where users can update any subset of the properties.

Conclusion

Utility types like Pick, Omit, Readonly, and Partial are powerful tools in TypeScript that help you create more flexible and reusable type definitions. By understanding and using these utilities, you can write cleaner and more maintainable code.

Feel free to experiment with these utility types in your own projects and see how they can simplify your type definitions!

Show me your love ❤️