TypeScript's advanced types and tool types improve code simplicity and type safety. 1. Conditional types (such as T extends U ? X : Y) allow different types to be returned according to type relationships, and are suitable for generic functions to decide the return structure according to parameter types; 2. Mapping types (such as Partial, ReadonlySome) modify attribute types by traversing the object key, which can be used to build form state or permission control; 3. Tool types (such as Pick, Omit, Exclude) reduce redundant type declarations, which are suitable for processing interface responses or component props; 4. The infer keyword is used to automatically extract type information, such as ReturnType to extract function return types, and ElementType to extract array element types, which is convenient for writing general logic or encapsulation type tools.

TypeScript's advanced types and tool types (Utility Types) are an unavoidable link that many developers can't avoid when they advance. They not only make the code more concise, but also improve type safety. If you have mastered the use of basic types and interfaces and want to further write more flexible and reusable type definitions, these advanced features are worth understanding.

The following parts will focus on common scenarios in actual development to help you understand the uses and usage methods of these types.

1. Condition type: Make judgments based on type

Conditional types allow you to return different types based on whether a type satisfies a certain relationship. Its basic form is T extends U ? X : Y , that is, "if T is a subtype of U, then use X, otherwise use Y".

Let's give a simple example:

 type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

This writing method is particularly useful in generic functions. For example, if you want to write a function, determine the structure of the return value based on the type of the passed parameter:

 function formatValue<T>(value: T): T extends number ? string : boolean {
  if (typeof value === &#39;number&#39;) {
    return value.toFixed(2) as any;
  }
  return !!value as any;
}

Although this example uses type assertions (any), this approach can make your API more flexible in some well-wrapped libraries.

2. Map type: batch modify the type of object properties

Mapping types can be used to iterate over the key of an object and apply a new type to each property. The most commonly used tool types such as Partial<T> , Required<T> , and Readonly<T> are all implemented based on mapping types.

for example:

 type MyPartial<T> = {
  [P in keyof T]?: T[P];
};

This is actually the built-in Partial<T> implementation method of TypeScript. You can expand your own tool type based on this, such as reading only a portion of the fields:

 type ReadonlySome<T, K extends keyof T> = {
  [P in keyof T]: P extends K ? Readonly<T[P]> : T[P];
};

type User = {
  id: number;
  name: string;
  email: string;
};

type LimitedUser = ReadonlySome<User, &#39;id&#39; | &#39;email&#39;>;
// id and email are read-only, name is not affected

This type of technique is very practical in scenarios such as building form status and permission control.

3. Practical tool types: How to use Pick, Omit, Exclude, etc.?

TypeScript provides some out-of-the-box tool types, and understanding them allows you to write much less duplicate code.

Common tool types:

• Partial<T> : All attributes become optional
• Required<T> : All attributes become required
• Readonly<T> : All attributes become read-only
• Pick<T, K> : Pick out the specified attributes from T to form a new type
• Omit<T, K> : Remove several specified properties from T
• Exclude<T, U> : Exclude part of U from union type T
• Extract<T, U> : Extract the part belonging to U from the union type T

For example, you have a user information type:

 type User = {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user';
};

You can use this:

 type UserInfo = Pick<User, &#39;name&#39; | &#39;email&#39;>;
// Equivalent to { name: string; email: string }

type PublicUser = Omit<User, &#39;role&#39;>;
// Equivalent to { id: number; name: string; email: string }

type AdminOnly = Extract<User[&#39;role&#39;], &#39;admin&#39;>;
// Get &#39;admin&#39;

These tool types are very common in scenarios such as handling interface responses, component props, data filtering, etc., and rational use can greatly reduce redundant type declarations.

4. Type derivation and infer: Automatically extract type information

The infer keyword is used to "infer" a subtype in a conditional type. It is often used to extract function return value types, array element types, etc.

For example, ReturnType<T> that comes with TypeScript is implemented like this:

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

function getUser() {
  return { id: 1, name: &#39;Alice&#39; };
}

type Result = MyReturnType<typeof getUser>;
// Get { id: number; name: string }

For example, extract the array element type:

 type ElementType<T> = T extends (infer E)[] ? E : never;

type Item = ElementType<string[]>; // string

This capability is critical when writing general logic or encapsulated type tools.

Basically that's it. TypeScript's advanced types seem complex, but in fact they all revolve around the core idea of "how to generate new types based on existing types". As long as you practice more, you will find that they are not difficult to master, and once you get started, the efficiency and type safety of writing code will be greatly improved.

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