TypeScript : Utility 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() {
const something:string = ""
return something;
}

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

// will return Promise

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

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> 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:

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

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

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.

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

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

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:[]}

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 MyReturnTypeWithCondition<T> = T extends (...args: any[]) => infer R ? R : never;

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

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

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 ExampleFunction = (x: number, y: string) => boolean;
type ReturnType = MyReturnTypeWithCondition<ExampleFunction>; 
// ReturnType will be boolean

IsIdentical: Uses conditional types to compare two types.

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

IsEqual: Ensures that both types have the same keys.

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 use these utility types to check if CombinedType is identical, exact, or equal to another type OfferSummary.

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

Practical Example

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

type Prettify<T> = {

};

The above is the detailed content of TypeScript : Utility Utility Types. For more information, please follow other related articles on the PHP Chinese website!