TypeScript Academy · 课时

TupleToUnion 与 UnionToIntersection

Q: 「TupleToUnion 与 UnionToIntersection」这节课中我会学到什么？

以编程方式在元组和联合类型之间转换 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

以编程方式在元组和联合类型之间转换

TupleToUnion 与 UnionToIntersection 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

TupleToUnion：概念

TupleToUnion 会将元组类型转换为其元素类型的联合，这与使用单个类型构建元组的过程相反。

type TupleToUnion<T extends readonly any[]> = T[number];
type A = TupleToUnion<[string, number, boolean]>; // string | number | boolean

T[number] 的工作原理

使用 number 为元组建立索引，可以一次访问所有数字索引；TypeScript 会将其表示为元素类型的联合。

type Tuple = [string, number, boolean];
type Elements = Tuple[number]; // string | number | boolean

使用 as const 的 TupleToUnion

将 as const 数组与其结合，即可从值数组推导出联合类型。

const COLORS = ["red", "green", "blue"] as const;
type Color = typeof COLORS[number]; // "red" | "green" | "blue"

UnionToIntersection：概念

将联合转换为交集更加困难，需要使用带有函数类型的可分配条件类型来收集所有成员。

type UnionToIntersection<U> =
  (U extends any ? (x: U) => void : never) extends (x: infer I) => void
    ? I
    : never;

函数技巧为何有效

对联合成员进行分配时，会将每个成员包装在函数类型中。然后，TypeScript 会推断出所有参数类型的交集，以满足结构约束。

type A = UnionToIntersection<{ a: 1 } | { b: 2 }>;
// { a: 1 } & { b: 2 }

UnionToTuple：难题

将联合转换为元组在理论上是可行的，但依赖于求值顺序（TypeScript 不保证这一点），因此请避免在生产环境中使用。

// Not reliable — union member order is unspecified
// Use TupleToUnion (safe) not UnionToTuple (fragile)

TupleToUnion 的实际用途

从字符串字面量元组中提取所有有效键，以构建用于验证的联合类型。

const ALLOWED_METHODS = ["GET", "POST", "PUT", "DELETE"] as const;
type HttpMethod = typeof ALLOWED_METHODS[number];
function request(method: HttpMethod) { /* ... */ }

UnionToIntersection 的实际用途

将联合中的多个混入接口合并为一个组合类型。

type Mixin1 = { log(): void };
type Mixin2 = { save(): Promise<void> };
type Combined = UnionToIntersection<Mixin1 | Mixin2>;
// { log(): void } & { save(): Promise<void> }

原始类型的交集

对互不相关的原始类型求交集会得到 never，因为不存在同时属于 string 和 number 的值。

type X = UnionToIntersection<string | number>; // never

在泛型约束中使用这些类型

在泛型约束中组合使用 TupleToUnion 和 UnionToIntersection，以构建灵活且类型安全的接口。

function merge<T extends object[]>(...args: T): UnionToIntersection<T[number]> {
  return Object.assign({}, ...args) as any;
}

回顾：元组 ↔ 联合 ↔ 交集

TupleToUnion 使用 T[number] 索引。UnionToIntersection 使用带有 infer 的分发函数技巧。两者都是高级类型操作不可或缺的工具。

快速检查

TupleToUnion<[string, number]> 是什么？

您学到的内容

TupleToUnion 使用数字索引从元组中提取元素联合。UnionToIntersection 使用分发函数技巧。这些是进行高级 TypeScript 类型操作的基础模式。

常见问题解答

「TupleToUnion 与 UnionToIntersection」课时是免费的吗？

是的 — 「TupleToUnion 与 UnionToIntersection」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「TupleToUnion 与 UnionToIntersection」这节课中我会学到什么？

以编程方式在元组和联合类型之间转换你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「TupleToUnion 与 UnionToIntersection」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy