Frontend Academy · 课时

映射类型与条件类型

Q: 「映射类型与条件类型」这节课中我会学到什么？

构建映射类型以转换某个类型的所有属性，并将条件类型与 infer 结合，用于实现高级类型级逻辑。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

构建映射类型以转换某个类型的所有属性，并将条件类型与 infer 结合，用于实现高级类型级逻辑。

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

映射类型——转换每个属性

映射类型会遍历类型的键并转换它们。它们是 Partial、Readonly 和 Record 工具类型的基础。

// Partial implemented as a mapped type:
type MyPartial<T> = {
  [K in keyof T]?: T[K];
};

// Readonly:
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K];
};

使用 as 重新映射键

在映射子句中使用 as 重新映射键名。将它与模板字面量类型结合，可以实现强大的转换。

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<{ name: string; age: number }>;
// { getName: () => string; getAge: () => number }

使用 never 过滤属性

在键重新映射中返回 never，即可从结果类型中移除该属性。

// Keep only function-valued properties:
type FunctionProperties<T> = {
  [K in keyof T as T[K] extends Function ? K : never]: T[K];
};

条件类型——类型的 if/else

条件类型使用 T extends U ? TrueType : FalseType 这一模式。它在类型层面求值，而不是在运行时求值。

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

type Flatten<T> = T extends Array<infer E> ? E : T;
type StrArr = Flatten<string[]>; // string
type Num = Flatten<number>;       // number

可分配的条件类型

当 T 是联合类型时，条件类型会分配到每个成员上。string | number extends string ? ... 会分别进行检查：(string extends string ? ...) | (number extends string ? ...)。

type ToArray<T> = T extends any ? T[] : never;

type StringOrNumberArray = ToArray<string | number>;
// string[] | number[]  (not (string | number)[])

使用 infer 提取类型

infer R 会引入一个由 TypeScript 填充的类型变量。它可以捕获类型结构中的部分内容。

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type Resolved = UnwrapPromise<Promise<string>>; // string
type Direct = UnwrapPromise<number>;             // number

模板字面量类型

模板字面量类型使用与模板字面量相同的反引号语法，但作用于类型层面，可以根据字符串字面量的组合创建联合类型。

type Side = 'top' | 'right' | 'bottom' | 'left';
type PaddingKey = `padding-${Side}`;
// 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left'

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'

组合映射类型与条件类型

最强大的 TypeScript 模式会将两者结合起来。内置的 required、partial、readonly 和 record 类型都是映射类型。

// Make all functions in an object async:
type Asyncify<T> = {
  [K in keyof T]: T[K] extends (...args: infer A) => infer R
    ? (...args: A) => Promise<R>
    : T[K];
};

DeepPartial — 递归工具类型

内置的 Partial 只能深入一层。DeepPartial 会递归处理嵌套对象。

type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

实际应用：应用程序接口响应类型

映射类型和条件类型可以实现强大的应用程序接口类型推导，例如只提取对象中可序列化为 JSON 的属性。

避免过度设计

复杂的类型技巧可能会让代码难以理解。请始终思考：使用更简单的类型别名或接口是否更清晰？类型应该记录意图，而不是展示 TypeScript 的熟练程度。

快速检查

当 T 是联合类型时，T extends U ? A : B 的结果是什么？

回顾：映射类型和条件类型

映射类型使用 [K in keyof T] 遍历键。使用 as 重新映射键。返回 never 进行筛选。条件类型：T extends U ? A : B。infer 用于提取类型变量。模板字面量类型用于构建字符串联合类型。将两者结合起来，可以实现 DeepPartial 和异步化等强大的类型转换。

常见问题解答

「映射类型与条件类型」课时是免费的吗？

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

「映射类型与条件类型」这节课中我会学到什么？

构建映射类型以转换某个类型的所有属性，并将条件类型与 infer 结合，用于实现高级类型级逻辑。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「映射类型与条件类型」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy