TypeScript?中?Partial?和?Pick?用法

更新時間：2026年05月27日 09:26:34 作者：AI?前端

TypeScript中的Partial和Pick是常用的工具類型,Partial將類型所有屬性變?yōu)榭蛇x,Pick從類型中選取指定屬性組成新類型,適用于字段篩選場景,下面就來詳細的介紹一下

Partial 的用法

作用：將一個類型的所有屬性變?yōu)榭蛇x（即添加 ?）。
適用場景：更新操作（如 PATCH 請求），只需傳入部分字段。
源碼實現(xiàn)：

type Partial<T> = { [P in keyof T]?: T[P]; };

示例：

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

type UpdateUserDto = Partial<User>;
// 等價于：{ id?: number; name?: string; email?: string; }

const update: UpdateUserDto = { name: "Alice" }; // ? 合法

Pick 的用法

作用：從一個類型中挑選指定的屬性，組成一個新類型。
適用場景：API 返回時只暴露部分字段（如列表頁僅需 id 和 name），避免敏感信息泄露。
源碼實現(xiàn)：

type Pick<T, K extends keyof T> = { [P in K]: T[P]; };

示例：

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

type UserPreview = Pick<User, 'id' | 'name' | 'email'>;
// 等價于：{ id: number; name: string; email: string; }

const user: UserPreview = { id: 1, name: "Bob", email: "bob@example.com" }; // ? 合法
// user.password; // ? 報錯：類型中不包含 password

組合使用示例

結合 Partial 和 Pick 可實現(xiàn)更精細的類型控制：

// 創(chuàng)建時不需要 id，且 password 必填
type CreateUserDto = Omit<User, 'id'> & { password: string };

// 更新時排除 id，其他字段可選
type UpdateUserDto = Partial<Omit<User, 'id'>> & { id: number };

// 分頁查詢只允許篩選 name 和 email
type UserQueryParams = Partial<Pick<User, 'name' | 'email'>> & { page: number; pageSize: number };

關鍵區(qū)別總結

特性	Partial<T>	Pick<T, K>
目的	所有屬性變可選	只保留指定屬性
屬性數(shù)量	不變（但都可選）	減少（僅保留 K 中的屬性）
典型用途	更新請求、表單草稿	列表展示、安全字段暴露