TypeScript类型推断的迷惑行为：四种函数返回值类型定义为何结果相同，以及联合类型在条件类型中的陷阱？

typescript 类型推断的奇异行为：四种函数返回值类型定义的相同结果及条件类型中联合类型的陷阱

本文分析了 TypeScript 中一些令人费解的类型推断行为。我们将探讨四种看似不同的类型定义为何得出相同的结果，并解释在条件类型中使用联合类型时可能遇到的问题。

首先，让我们观察这四种 getReturnType 类型定义：

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;

尽管 ...args 的类型分别为 never、never[]、any[] 和 any，这四种定义在实际应用中却产生相同的结果。这是因为 TypeScript 的类型系统中，函数参数类型在类型推断中的作用并非我们直觉所想的那样。never 代表永不存在的值，never[] 代表空数组，any[] 代表任意类型数组，any 代表任意类型。然而，extends 条件判断主要关注的是函数的返回值类型 infer R，参数类型的影響相对较小，甚至可以忽略。因此，只要传入的 T 是函数类型，都能推断出返回值类型并赋值给 R；若 T 不是函数类型，则返回 never。

接下来，我们分析另一个问题，涉及条件类型和联合类型：

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);
};

这段代码中，Props 类型定义了一个泛型 T，限制其为 Major 或 ResCategoryLabel 的联合类型。setSelect 函数的第二个参数 label 的类型定义为 T extends Major ? Major : ResCategoryLabel。本意是想根据 T 的类型确定 label 的类型：若 T 为 Major，则 label 为 Major；否则为 ResCategoryLabel。然而，由于 T 是联合类型，TypeScript 无法在编译时确定 T 的具体类型，导致 setSelect 函数的类型检查失败。这是因为条件类型处理联合类型时，会分别对每个类型进行判断，最终结果是所有分支结果的联合。在这种情况下，label 的类型最终会变成 Major | ResCategoryLabel，与 changeSelect 函数中 label 的类型不匹配，从而导致类型错误。解决方法可能需要重新设计类型定义，例如使用类型守卫或更精细的类型推断来避免此问题。

以上就是TypeScript类型推断的迷惑行为：四种函数返回值类型定义为何结果相同，以及联合类型在条件类型中的陷阱？的详细内容，更多请关注php中文网其它相关文章！