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() {
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<typeof foo>
</typeof>

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 foo>>
</returntype>

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 getevents>>;

const initEvent:OfferEvent = {event:[]}
</returntype></apiresponse>

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;
</t>

Breaking It Down

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

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

• 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 MyReturnType = ReturnType<typeof foo>
</typeof>

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 foo>>
</returntype>

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 getevents>>;

const initEvent:OfferEvent = {event:[]}
</returntype></apiresponse>

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

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] extends [U] ? ([U] extends [T] ? true : false) : false;

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.

type IsEqual = 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:

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

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

Practical Example

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

type MyReturnType = ReturnType<typeof foo>
</typeof>

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:

type MyAsyncReturnType = Awaited<returntype foo>>
</returntype>

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:

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 getevents>>;

const initEvent:OfferEvent = {event:[]}
</returntype></apiresponse>

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

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:

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

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:

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

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

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!

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