TypeScript Pick: Eigenschaften aus einem Typ auswählen

Pick<T, K> ist ein eingebauter Utility Type, der einen Objekttyp mit nur den Eigenschaften von T erzeugt, die in K genannt sind. Nutze ihn, wenn eine Funktion oder Komponente ein paar Felder eines größeren Typs braucht:

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 akzeptiert einen vollständigen User und auch ein einfaches Objekt { id, name }, weil es nur das verlangt, was es verwendet. So lässt es sich leichter aufrufen und testen. Pick existiert nur im Typ: Das vollständige Objekt ada hat zur Laufzeit weiterhin alle fünf Eigenschaften.

Syntax und Prüfung der Schlüssel

Pick<Type, Keys>

Keys ist ein einzelner Schlüssel oder eine Union von Schlüsseln, und jeder davon muss in Type existieren. Die Definition in der Standardbibliothek von TypeScript macht das zu einem Constraint:

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

Wegen K extends keyof T ist ein falsch geschriebener oder fehlender Schlüssel ein Compilerfehler, und dein Editor kann die Schlüsselnamen automatisch vervollständigen:

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

Der Fehler lautet error TS2344: Type '"cost"' does not satisfy the constraint 'keyof Product'. Das ist ein Unterschied zu Omit, dessen Schlüssel nicht geprüft werden.

Pick behält readonly und optional

Pick iteriert über Schlüssel von T, also behält jede ausgewählte Eigenschaft ihre Modifikatoren:

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 }

Die letzte Zeile zeigt { id: 8 }, weil readonly nur beim Kompilieren geprüft wird: Die Zuweisung wurde gemeldet, mit @ts-expect-error unterdrückt und trotzdem ausgeführt. Um die Modifikatoren beim Auswählen zu ändern, umschließe das Ergebnis: Partial<Pick<Account, "plan">> oder Required<Pick<Account, "email">>.

Pick vs Omit

Pick nennt, was bleibt; Omit nennt, was wegfällt. Heute liefern beide dasselbe Ergebnis, aber sie verhalten sich unterschiedlich, wenn der Quelltyp wächst:

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 }

Für Daten, die deinen Server verlassen, ist Pick die sicherere Standardwahl: Nichts taucht im Typ auf, außer jemand hat es absichtlich hinzugefügt.

Auswahl aus verschachtelten Typen

Pick sieht nur Schlüssel der obersten Ebene: Ein Pfad mit Punkt wie Pick<Customer, "address.city"> ist ein Fehler (TS2344), keine verschachtelte Auswahl. Nimm einen Indexed Access Type, um den verschachtelten Typ zu erreichen, und wähle dann daraus aus:

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"] ist der Typ der Eigenschaft address. Mit derselben Syntax erreichst du Array-Elemente: Bei einer Eigenschaft orders: Order[] ist Customer["orders"][number] gleich Order.

Eine typisierte pick()-Funktion

Pick bewirkt zur Laufzeit nichts. Eine kleine generische Funktion kopiert die gewählten Eigenschaften in ein neues Objekt und gibt genau Pick<T, K> zurück:

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 lässt TypeScript K aus den String-Argumenten ableiten, also hat der Rückgabetyp genau die ausgewählten Schlüssel. Die Assertion {} as Pick<T, K> ist nötig, weil ein leeres Objekt diese Eigenschaften noch nicht hat; die Schleife füllt sie auf.

Eigenschaften nach ihrem Werttyp auswählen

Pick wählt nach dem Schlüsselnamen aus. Um nach dem Typ der Eigenschaft auszuwählen, zum Beispiel "alle String-Felder", schreibst du einen Mapped Type mit einem Schlüsselfilter:

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 }

Die as-Klausel bildet jeden Schlüssel auf sich selbst ab, wenn sein Typ passt, und sonst auf never, und Schlüssel mit never fallen weg. Eine Feinheit: Der Typ einer optionalen Eigenschaft enthält undefined, also würde ein optionales subtitle?: string hier nicht als string zählen; teste gegen string | undefined, um es einzuschließen.