Frontend Academy · 课时

工具类型：Partial、Required、Pick 与 Omit

Q: 「工具类型：Partial、Required、Pick 与 Omit」这节课中我会学到什么？

使用内置工具类型转换现有类型，在不重复定义的情况下创建不同变体。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用内置工具类型转换现有类型，在不重复定义的情况下创建不同变体。

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

内置工具类型

TypeScript 自带一组可以转换其他类型的泛型工具类型。它们不必手动重写相似的接口变体。

Partial<T>

使 T 的所有属性都变为可选。它非常适合更新或修补数据，其中不需要提供所有字段。

interface User { name: string; email: string; age: number; }

function updateUser(id: string, changes: Partial<User>) {
  // changes.name is string | undefined
  // changes.email is string | undefined
}

updateUser('1', { name: 'Bob' }); // only update name

Required<T>

它与 Partial 相反：使所有属性都变为必需，并移除可选（?）修饰符。

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}

function validate(config: Required<Config>) {
  // All three are now required
  console.log(config.host, config.port, config.debug);
}

Pick<T, K>

创建一个只包含 T 中指定属性的类型。适合将大型对象裁剪为只包含所需字段。

interface User { id: number; name: string; email: string; password: string; }

type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
// { id: number; name: string; email: string }
// password is excluded — safe to send to client

Omit<T, K>

创建一个移除指定属性的类型。它是 Pick 的反向操作。

type UserWithoutPassword = Omit<User, 'password'>;
// { id: number; name: string; email: string }

type CreateUserDto = Omit<User, 'id'>; // new users don't have an id yet

Readonly<T>

使所有属性变为只读，从而防止重新赋值。适合配置对象和不可变数据。

const config: Readonly<Config> = {
  host: 'localhost',
  port: 3000,
};
config.port = 8080; // Error: cannot assign to 'port' because it is read-only

Record<K, V>

创建一种对象类型，其键的类型为 K，值的类型为 V。当键是已知的联合类型时，它比原始索引签名更简洁。

type Role = 'admin' | 'editor' | 'viewer';
type Permissions = Record<Role, { canEdit: boolean; canDelete: boolean }>;

const perms: Permissions = {
  admin:  { canEdit: true,  canDelete: true  },
  editor: { canEdit: true,  canDelete: false },
  viewer: { canEdit: false, canDelete: false },
};

ReturnType<T> 与 Parameters<T>

提取函数类型的返回类型和参数类型。当无法导入某个类型，但需要匹配函数签名时，这很有用。

function fetchUser(id: number) {
  return { id, name: 'Alice' };
}

type UserResult = ReturnType<typeof fetchUser>; // { id: number; name: string }
type FetchParams = Parameters<typeof fetchUser>; // [id: number]

Awaited<T>

将 Promise 类型解包为其解析值类型。处理异步函数时很有用。

type UserResponse = Awaited<ReturnType<typeof fetchUser>>;
// Resolves both the function return and the Promise

async function load() { return { user: { name: 'Alice' } }; }
type Loaded = Awaited<ReturnType<typeof load>>; // { user: { name: string } }

Extract<T, U> 与 Exclude<T, U>

Extract<T, U> 只保留 T 中可赋值给 U 的类型。Exclude<T, U> 会移除这些类型。

type A = 'a' | 'b' | 'c' | 'd';
type BC = Extract<A, 'b' | 'c' | 'e'>; // 'b' | 'c'
type AD = Exclude<A, 'b' | 'c'>;       // 'a' | 'd'

// NonNullable removes null and undefined:
type T = string | null | undefined;
type NonNull = NonNullable<T>; // string

组合工具类型

可以组合工具类型来创建精确的类型。

type UpdatePayload<T> = Partial<Omit<T, 'id' | 'createdAt'>>;
// Use for PATCH endpoints — omit immutable fields, make rest optional

function patch(id: string, data: UpdatePayload<User>) {
  // data can have any subset of mutable user fields
}

快速检查

哪个工具类型可以从接口中移除指定的键？

回顾：工具类型

Partial 使所有字段变为可选。Required 会移除可选修饰符。Pick 保留选定的键。Omit 移除选定的键。Readonly 防止修改。Record 将联合键映射到值类型。ReturnType 和 Parameters 提取函数类型。组合工具类型可以创建精确的 DTO 类型。

常见问题解答

「工具类型：Partial、Required、Pick 与 Omit」课时是免费的吗？

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

「工具类型：Partial、Required、Pick 与 Omit」这节课中我会学到什么？

使用内置工具类型转换现有类型，在不重复定义的情况下创建不同变体。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「工具类型：Partial、Required、Pick 与 Omit」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy