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!