Pick trong TypeScript: chọn thuộc tính từ một kiểu (ví dụ)

Pick<T, K> là một utility type có sẵn, tạo ra kiểu object chỉ gồm các thuộc tính của T được nêu trong K. Dùng nó khi một hàm hay component chỉ cần vài trường của một kiểu lớn hơn:

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

type UserPreview = Pick<User, "id" | "name">;
// { id: number; name: string }

function renderPreview(user: UserPreview): string {
  return `#${user.id} ${user.name}`;
}

const ada: User = {
  id: 1, name: "Ada", email: "ada@example.com",
  passwordHash: "x9f...", lastLogin: "2024-03-15",
};

console.log(renderPreview(ada));                  // #1 Ada
console.log(renderPreview({ id: 2, name: "Linus" })); // #2 Linus

renderPreview nhận cả một User đầy đủ lẫn một object { id, name } đơn giản, vì nó chỉ yêu cầu đúng những gì nó dùng. Điều đó giúp hàm dễ gọi và dễ test hơn. Pick chỉ tác động lên kiểu: object ada đầy đủ vẫn có cả năm thuộc tính lúc chạy.

Cú pháp và kiểm tra khóa

Pick<Type, Keys>

Keys là một khóa hoặc một union các khóa, và mỗi khóa đều phải tồn tại trên Type. Định nghĩa trong thư viện chuẩn của TypeScript biến điều đó thành một ràng buộc:

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

Nhờ K extends keyof T, một khóa viết sai chính tả hoặc không tồn tại sẽ là lỗi biên dịch, và trình soạn thảo có thể tự động gợi ý tên khóa:

interface Product {
  sku: string;
  title: string;
  price: number;
  stock: number;
}

type PriceTag = Pick<Product, "title" | "price">;

const tag: PriceTag = { title: "Lamp", price: 39 };
console.log(`${tag.title}: $${tag.price}`); // Lamp: $39

// @ts-expect-error: Type '"cost"' does not satisfy the constraint 'keyof Product'
type Broken = Pick<Product, "cost">;

Lỗi là error TS2344: Type '"cost"' does not satisfy the constraint 'keyof Product'. Đây là điểm khác với Omit, vốn không kiểm tra khóa.

Pick giữ readonly và tùy chọn

Pick ánh xạ qua các khóa của T, nên mỗi thuộc tính được chọn giữ nguyên modifier của nó:

interface Account {
  readonly id: number;
  email?: string;
  plan: "free" | "pro";
}

type AccountRef = Pick<Account, "id" | "email">;
// { readonly id: number; email?: string }

const ref: AccountRef = { id: 7 }; // email is still optional
// @ts-expect-error: Cannot assign to 'id' because it is a read-only property
ref.id = 8;

console.log(ref); // { id: 8 }

Dòng cuối in ra { id: 8 } vì readonly chỉ là kiểm tra lúc biên dịch: phép gán đã bị báo lỗi, bị chặn thông báo bằng @ts-expect-error, và vẫn chạy. Để đổi modifier trong lúc chọn, hãy bọc kết quả: Partial<Pick<Account, "plan">> hoặc Required<Pick<Account, "email">>.

So sánh Pick và Omit

Pick nêu những gì cần giữ; Omit nêu những gì cần bỏ. Hiện tại cả hai cho cùng kết quả, nhưng chúng hoạt động khác nhau khi kiểu nguồn có thêm thuộc tính:

interface Order {
  id: number;
  total: number;
  cardLast4: string;
  // added later: internalNotes: string;
}

type Receipt = Pick<Order, "id" | "total">;   // stays { id; total }
type AdminView = Omit<Order, "cardLast4">;    // will include internalNotes too

const receipt: Receipt = { id: 1, total: 49.9 };
const admin: AdminView = { id: 1, total: 49.9 };
console.log(receipt, admin); // { id: 1, total: 49.9 } { id: 1, total: 49.9 }

Với dữ liệu rời khỏi máy chủ của bạn, Pick là lựa chọn mặc định an toàn hơn: không có gì xuất hiện trong kiểu trừ khi ai đó cố ý thêm vào.

Chọn từ kiểu lồng nhau

Pick chỉ thấy các khóa ở cấp ngoài cùng: một đường dẫn có dấu chấm như Pick<Customer, "address.city"> là lỗi (TS2344), không phải phép chọn lồng nhau. Hãy dùng indexed access type để đi tới kiểu lồng bên trong, rồi chọn từ đó:

interface Customer {
  id: number;
  name: string;
  address: {
    street: string;
    city: string;
    country: string;
  };
}

type City = Pick<Customer["address"], "city">; // { city: string }

// Keep the shape, trim the nested object
type ShippingLabel = Pick<Customer, "name"> & {
  address: Pick<Customer["address"], "city" | "country">;
};

const label: ShippingLabel = {
  name: "Ada",
  address: { city: "London", country: "UK" },
};

const city: City = { city: label.address.city };
console.log(label, city.city);
// { name: 'Ada', address: { city: 'London', country: 'UK' } } London

Customer["address"] là kiểu của thuộc tính address. Cú pháp này cũng đi tới được phần tử mảng: với thuộc tính orders: Order[], Customer["orders"][number] là Order.

Hàm pick() có kiểu

Pick không làm gì lúc chạy. Một hàm generic nhỏ sao chép các thuộc tính được chọn sang object mới và trả về đúng Pick<T, K>:

function pick<T extends object, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K> {
  const result = {} as Pick<T, K>;
  for (const key of keys) {
    result[key] = obj[key];
  }
  return result;
}

const book = { id: 3, title: "Dune", author: "Herbert", pages: 412 };

const summary = pick(book, "title", "author"); // { title: string; author: string }
console.log(summary);          // { title: 'Dune', author: 'Herbert' }
console.log(Object.keys(summary)); // [ 'title', 'author' ]
// pick(book, "isbn") would be error TS2345: Argument of type '"isbn"' is not assignable
// to parameter of type '"author" | "id" | "pages" | "title"'.

K extends keyof T cho phép TypeScript suy ra K từ các đối số chuỗi, nên kiểu trả về có đúng những khóa được chọn. Phép ép kiểu {} as Pick<T, K> là cần thiết vì object rỗng chưa có các thuộc tính đó; vòng lặp sẽ điền chúng vào.

Chọn thuộc tính theo kiểu giá trị

Pick chọn theo tên khóa. Để chọn theo kiểu của thuộc tính, ví dụ "mọi trường kiểu chuỗi", hãy viết một mapped type có bộ lọc khóa:

type PickByValue<T, V> = {
  [P in keyof T as T[P] extends V ? P : never]: T[P];
};

interface Article {
  id: number;
  title: string;
  slug: string;
  views: number;
  published: boolean;
}

type TextFields = PickByValue<Article, string>;   // { title: string; slug: string }
type NumberFields = PickByValue<Article, number>; // { id: number; views: number }

const text: TextFields = { title: "Hello", slug: "hello" };
const nums: NumberFields = { id: 1, views: 120 };
console.log(text, nums); // { title: 'Hello', slug: 'hello' } { id: 1, views: 120 }

Mệnh đề as ánh xạ mỗi khóa thành chính nó khi kiểu khớp, và thành never trong trường hợp ngược lại, rồi các khóa never bị loại bỏ. Một điểm tinh tế: kiểu của thuộc tính tùy chọn có chứa undefined, nên subtitle?: string sẽ không được tính là string ở đây; hãy so với string | undefined để bao gồm nó.