Confusion about TypeScript type inference: Why are the definitions of the return value types of the four functions the same, and how to avoid type errors in the union type scenario?

Deeply explore the subtleties of TypeScript type inference: the equivalence of the definition of the return value type of the four functions and the type safety under the union type

This article deeply analyzes the TypeScript type inference mechanism, explains how seemingly different function type definitions can obtain the same result, and solves type errors in the joint type scenario.

First, we observe four types of getReturnType definitions:

 type getReturnType1<t> = T extends (...args: never) => infer R ? R : never;
type getReturnType2<t> = T extends (...args: never[]) => infer R ? R : never;
type getReturnType3<t> = T extends (...args: any[]) => infer R ? R : never;
type getReturnType4<t> = T extends (...args: any) => infer R ? R : never;</t></t></t></t>

All four type definitions are designed to extract the return value type from the function type. Although parameter types ( never , never[] , any[] , any ) are different, they have no effect on the inference result of the return value type R in type in inference. The extends keyword focuses on the structure of function types, not the specific types of parameters. As long as the function type matches, infer R can correctly infer the return value type. Therefore, these four definitions are actually equivalent.

Next, we analyze a piece of code that shows the type errors that may occur when union type and conditional type are combined:

 type Props<t extends major rescategorylabel> = {
  labels: T[];
  setSelect: (index: number, label: T extends Major ? Major : ResCategoryLabel) => void;
  xxx: any; //Other attributes are omitted};

const changeSelect = (
  index: number,
  label: Major | ResCategoryLabel,
  e: React.MouseEvent<htmlanchorelement> | React.TouchEvent<htmlanchorelement>
) => {
  setSelect(index, label);
  activeTabToCenter(e.currentTarget as HTMLElement);
};</htmlanchorelement></htmlanchorelement></t>

There is a problem with the type inference of the setSelect function parameter label in the Props type definition. Conditional type T extends Major ? Major : ResCategoryLabel attempts to determine the type of label based on the type of T However, since T is a joint type of Major | ResCategoryLabel , when the actual type of T is unknown, the compiler cannot determine whether T is Major or ResCategoryLabel , resulting in label 's type inference failing. The problem is not the conditional type itself, but its application in the context of union type.

The solution is to use Major | ResCategoryLabel directly as the type of label :

 type Props<t extends major rescategorylabel> = {
  labels: T[];
  setSelect: (index: number, label: Major | ResCategoryLabel) => void;
  xxx: any; //Other attributes are omitted};</t>

In this way, the parameter types of setSelect function are clear, avoiding type errors and improving the readability and maintainability of the code. This reflects the need to abandon the refined type control brought by conditional types when dealing with joint types in exchange for clearer and safer type definitions.

The above is the detailed content of Confusion about TypeScript type inference: Why are the definitions of the return value types of the four functions the same, and how to avoid type errors in the union type scenario?. For more information, please follow other related articles on the PHP Chinese website!