What is confusing about TypeScript type inference: the four types have the same results, and the problem of matching conditional types with union types?

The subtleties of TypeScript type inference: The same result of the four types definitions and the matching problem between the conditional type and the union type

This article explores the reasons why several seemingly different type definitions in TypeScript produce the same results, and explains a problem of matching conditional types with union types.

First, we analyze the definitions of four getReturnType types:

 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 infer their return value type from function types. Although parameter types (...args: never) , (...args: never[]) , (...args: any[]) and (...args: any) look different, they perform consistently in type inference. This is because the extends keyword mainly focuses on the number of parameters and return value types of the function, and does not strictly check the details of the parameter type. never represents an impossible type, any represents any type, and never[] represents an empty array; these differences are ignored during the return value type inference process. Therefore, the return value type R of the function can be correctly inferred.

Next, we analyze a problem that conditional types do not match union types:

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

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>

The second parameter label of setSelect function is defined as T extends Major ? Major : ResCategoryLabel . The problem is that when T is Major | ResCategoryLabel , TypeScript cannot determine the type of label . The conditional type tries to select a type based on whether T is Major , but T may be Major or ResCategoryLabel , causing type inference to fail to give a certain type, resulting in a type mismatch error. This is not a code logic error, but a limitation of the TypeScript type system when dealing with union types and conditional types. A workaround may require refactoring the type definition of the Props type or setSelect function, such as using type assertions or more granular type definitions to explicitly type label .

The above is the detailed content of What is confusing about TypeScript type inference: the four types have the same results, and the problem of matching conditional types with union types?. For more information, please follow other related articles on the PHP Chinese website!