TypeScript Pick: בחירת מאפיינים מטיפוס (דוגמאות)

Pick<T, K> הוא utility type מובנה שיוצר טיפוס אובייקט עם המאפיינים של T שנקובים ב-K בלבד. השתמשו בו כשפונקציה או קומפוננטה צריכות כמה שדות מטיפוס גדול יותר:

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 מקבלת User מלא וגם אובייקט פשוט { id, name }, כי היא מבקשת רק את מה שהיא משתמשת בו. כך קל יותר לקרוא לה ולבדוק אותה. Pick קיים רק ברמת הטיפוסים: לאובייקט ada המלא עדיין יש את כל חמשת המאפיינים בזמן ריצה.

תחביר ובדיקת מפתחות

Pick<Type, Keys>

Keys הוא מפתח יחיד או איחוד של מפתחות, וכל אחד מהם חייב להיות קיים ב-Type. ההגדרה בספרייה הסטנדרטית של TypeScript הופכת את זה להגבלה:

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

בגלל K extends keyof T, מפתח עם שגיאת כתיב או מפתח חסר הוא שגיאת קומפילציה, והעורך יכול להשלים אוטומטית את שמות המפתחות:

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">;

השגיאה היא error TS2344: Type '"cost"' does not satisfy the constraint 'keyof Product'. זה הבדל לעומת Omit, שהמפתחות שלו לא נבדקים.

Pick שומר על readonly ועל אופציונליות

Pick ממפה על מפתחות של T, ולכן כל מאפיין שנבחר שומר על המגדירים שלו:

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 }

השורה האחרונה מציגה { id: 8 } כי readonly הוא בדיקה בזמן קומפילציה בלבד: ההשמה דווחה, הושתקה עם @ts-expect-error, ובכל זאת רצה. כדי לשנות את המגדירים תוך כדי בחירה, עטפו את התוצאה: Partial<Pick<Account, "plan">> או Required<Pick<Account, "email">>.

Pick מול Omit

Pick מציין מה להשאיר; Omit מציין מה להוריד. היום שניהם נותנים אותה תוצאה, אבל הם מתנהגים אחרת כשטיפוס המקור גדל:

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 }

לנתונים שיוצאים מהשרת שלכם, Pick היא ברירת המחדל הבטוחה יותר: שום דבר לא מופיע בטיפוס אלא אם מישהו הוסיף אותו בכוונה.

בחירה מטיפוסים מקוננים

Pick רואה רק מפתחות ברמה העליונה: נתיב עם נקודות כמו Pick<Customer, "address.city"> הוא שגיאה (TS2344), ולא בחירה מקוננת. השתמשו ב-indexed access type כדי להגיע לטיפוס המקונן, ואז בחרו ממנו:

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"] הוא הטיפוס של המאפיין address. אותו תחביר מגיע גם לאיברי מערך: עבור מאפיין orders: Order[], Customer["orders"][number] הוא Order.

פונקציית pick() עם טיפוסים

Pick לא עושה כלום בזמן ריצה. פונקציה גנרית קטנה מעתיקה את המאפיינים שנבחרו לאובייקט חדש ומחזירה בדיוק 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 מאפשר ל-TypeScript להסיק את K מארגומנטי המחרוזת, כך שלטיפוס ההחזרה יש בדיוק את המפתחות שנבחרו. ה-assertion {} as Pick<T, K> נחוץ כי לאובייקט ריק עדיין אין את המאפיינים האלה; הלולאה ממלאת אותם.

בחירת מאפיינים לפי טיפוס הערך

Pick בוחר לפי שם המפתח. כדי לבחור לפי טיפוס המאפיין, למשל "כל שדות המחרוזת", כתבו mapped type עם סינון מפתחות:

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 }

פסוקית ה-as ממפה כל מפתח לעצמו כשהטיפוס שלו מתאים ול-never אחרת, ומפתחות never מושמטים. דקות אחת: הטיפוס של מאפיין אופציונלי כולל undefined, ולכן subtitle?: string אופציונלי לא ייחשב כאן string; בדקו מול string | undefined כדי לכלול אותו.