TypeScript Academy · 课时

infer 的实用场景：拆解 Promise

Q: 「infer 的实用场景：拆解 Promise」这节课中我会学到什么？

拆解 Promise、数组和自定义包装器类型 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

拆解 Promise、数组和自定义包装器类型

第 4 / 4 课13 个步骤

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

解包问题

处理异步代码时，您经常会收到 Promise，并需要获取底层的 T。infer 关键字让这种提取过程可以重复使用。

type Awaited<T> = T extends Promise<infer U> ? U : T;
type A = Awaited<Promise<string>>; // string
type B = Awaited<number>;          // number

内置 Awaited 工具类型

TypeScript 4.5 引入了内置的 Awaited，它可以递归处理嵌套 Promise。

type A = Awaited<Promise<Promise<string>>>; // string
// Handles arbitrary nesting automatically

使用自定义深度进行解包

在 Awaited 成为内置工具类型之前，开发者会使用带有 infer 的递归类型来解包 Promise。

type DeepAwaited<T> =
  T extends Promise<infer U> ? DeepAwaited<U> : T;
type A = DeepAwaited<Promise<Promise<number>>>; // number

解包数组元素

同样的推断模式可以提取数组的元素类型，等价于内置的 T[number] 方法。

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

解包可观察对象类型

对于 RxJS 可观察对象，推断可以提取其发出的类型。

type ObservableType<T> = T extends Observable<infer U> ? U : never;
type A = ObservableType<Observable<User>>; // User

解包函数返回值

组合 ReturnType 和 Awaited，即可获取异步函数解析后的值类型。

async function getUser(): Promise<User> { /* ... */ }
type UserResult = Awaited<ReturnType<typeof getUser>>; // User

解包嵌套包装类型

您可以链接使用 infer，处理像 Promise> 这样经过多层包装的类型。

type UnwrapPromiseArray<T> =
  T extends Promise<infer U>
    ? U extends (infer V)[]
      ? V
      : U
    : T;
type A = UnwrapPromiseArray<Promise<User[]>>; // User

根据结构有条件地解包

使用类型推断可以仅对特定类型进行有条件的解包，同时保持其他类型不变。

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

type A = MaybeUnwrap<Promise<string>>;  // string
type B = MaybeUnwrap<number[]>;         // number
type C = MaybeUnwrap<boolean>;          // boolean

带类型的应用程序接口获取包装器

返回解析后数据类型的泛型获取包装器，是基于推断进行解包的经典应用。

async function fetchData<T>(url: string): Promise<T> {
  const res = await fetch(url);
  return res.json() as T;
}
type UserData = Awaited<ReturnType<typeof fetchData<User>>>; // User

安全处理错误的解包

将结果模式与推断结合，可以从可辨识联合类型中提取成功类型。

type Ok<T> = { ok: true; value: T };
type Err = { ok: false; error: string };
type ExtractOk<T> = T extends Ok<infer V> ? V : never;
type A = ExtractOk<Ok<number> | Err>; // number

回顾：使用类型推断进行解包

infer 关键字是从包装类型中提取类型的瑞士军刀，适用于 Promise、数组、可观察对象和结果类型。内置的 Awaited 负责异步解包；对于其他结构，请使用自定义类型。

快速检查

获取异步函数解析后值类型的最佳方式是什么？

在交互式课程中回答

您学到的内容

基于推断的解包是处理异步 TypeScript 代码的实用工具。请对 Promise 使用内置的 Awaited，并为数组、可观察对象和结果模式构建自定义解包类型。

免费开始

用 AI 导师学习 TypeScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 101
课程: 352

免费开始学习查看完整课程

常见问题解答

「infer 的实用场景：拆解 Promise」课时是免费的吗？

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

「infer 的实用场景：拆解 Promise」这节课中我会学到什么？

拆解 Promise、数组和自定义包装器类型你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「infer 的实用场景：拆解 Promise」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy