TypeScript Academy · 课时

Flatten 与 UnwrapPromise 工具类型

Q: 「Flatten 与 UnwrapPromise 工具类型」这节课中我会学到什么？

编写可拆解嵌套泛型结构的类型 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

编写可拆解嵌套泛型结构的类型

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

展平问题

JavaScript 数组可以嵌套。Flatten 实用类型会递归移除类型中的数组包装，返回最内层元素类型。

type Flatten<T> = T extends (infer U)[] ? Flatten<U> : T;
type A = Flatten<number[][][]>; // number
type B = Flatten<string[]>;     // string

非递归展平（单层）

单层展平对应 Array.prototype.flat(1)——它只解包一层嵌套。

type FlatOnce<T> = T extends (infer U)[] ? U : T;
type A = FlatOnce<number[][]>; // number[]
type B = FlatOnce<string[]>;   // string

递归展平

递归版本通过不断递归，直到不再有数组包装，从而模拟 Array.prototype.flat(Infinity)。

type Flatten<T> = T extends (infer U)[] ? Flatten<U> : T;
type C = Flatten<boolean[][][]>; // boolean

UnwrapPromise：一层

使用类型推断解包单个 Promise 层。

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type D = UnwrapPromise<Promise<string>>; // string
type E = UnwrapPromise<number>;          // number

深层 UnwrapPromise

递归解包嵌套的 promise——等同于内置的 Awaited。

type DeepUnwrap<T> = T extends Promise<infer U> ? DeepUnwrap<U> : T;
type F = DeepUnwrap<Promise<Promise<number>>>; // number

组合 Flatten 和 UnwrapPromise

组合类型可以同时处理 promise 和数组，适用于返回数组的异步函数。

type Simplify<T> =
  T extends Promise<infer U> ? Simplify<U>
  : T extends (infer V)[] ? Simplify<V>
  : T;

type G = Simplify<Promise<string[][]>>; // string

内置的 Awaited<T>

TypeScript 4.5 及更高版本提供了 Awaited，它会递归解包 thenable 类型，包括非 Promise 的 thenable。

type H = Awaited<Promise<Promise<string>>>; // string
// Also handles custom thenables with .then()

解包映射值

相同的 infer 模式可以从 Map 中提取值类型。

type MapValue<T> = T extends Map<any, infer V> ? V : never;
type I = MapValue<Map<string, number[]>>; // number[]

FlattenObject：合并嵌套接口

类型级对象展平器会合并嵌套对象类型——它更复杂，但对深层配置合并很有用。

// This requires recursive mapped types + intersection spreading
// See the DeepPartial lesson for the base pattern

实际用途：解包接口响应

解包嵌套的接口响应包装器，无需手动进行类型断言即可获取数据类型。

type ApiData<T> = { data: T; status: number };
type ExtractData<T> = T extends ApiData<infer D> ? D : T;
type J = ExtractData<ApiData<User[]>>; // User[]

回顾：展平与解包

Flatten 和 UnwrapPromise 使用带有 infer 的递归条件类型来剥离类型包装。使用 Awaited 解包 promise，并针对其他结构编写自定义递归逻辑。

快速检查

Flatten 返回什么？

您学到的内容

Flatten 和 UnwrapPromise 是递归条件类型，可以剥离泛型包装。将它们组合起来简化复杂的嵌套类型，并使用内置的 Awaited 处理 promise 链。

常见问题解答

「Flatten 与 UnwrapPromise 工具类型」课时是免费的吗？

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

「Flatten 与 UnwrapPromise 工具类型」这节课中我会学到什么？

编写可拆解嵌套泛型结构的类型你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「Flatten 与 UnwrapPromise 工具类型」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy