ProgrammierungFrontend Entwickler

Wie funktioniert Pick in TypeScript, wofür ist dieser Utility-Typ gedacht und was ist der Unterschied zu Omit?

Bestehen Sie Vorstellungsgespräche mit dem Hintsage-KI-Assistenten

Antwort.

Der Utility-Typ Pick<T, K> wurde in TypeScript eingeführt, um die selektive Kopie von Teilen der Felder aus einem bestehenden Typ oder einer Schnittstelle zu lösen.

Hintergrund

Oft werden bei der Entwicklung dieselben Datenstrukturen mit geringfügigen Variationen wiederverwendet. Vor der Einführung von Pick musste man neue Schnittstellen erstellen, indem man die benötigten Felder manuell kopiert hat, was zu Code-Duplikation und Fehlern bei weiteren Änderungen der ursprünglichen Strukturen führte.

Problem

Es ist notwendig, die Eingangs- oder Ausgangsdaten einer Funktion zu typisieren, indem man nur einen Teil der Felder eines großen Interfaces verwendet, um Redundanz zu vermeiden und den Vertrag so konkret wie möglich zu gestalten.

Lösung

Pick löst das Problem, eine Teilmenge der Eigenschaften des Typs T anhand der Schlüssel K auszuwählen:

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

Beispiel:

interface User { id: number; name: string; email: string; } type Credentials = Pick<User, 'email' | 'name'>; const creds: Credentials = { email: "user@example.com", name: "User Name", };

Wesentliche Merkmale:

  • Erstellt einen neuen Typ mit nur den benötigten Schlüsseln;
  • Sehr nützlich für die Typisierung von Select-Abfragen, Formularen, Ausgaben;
  • Minimiert die Menge an manuellem Code und Fehlern beim Refactoring.

Trickfragen.

Worin besteht der Unterschied zwischen Pick und Omit?

Pick wählt nur die aufgelisteten Felder des Typs; Omit schließt sie im Gegensatz dazu von der Struktur aus.

type PartialUser = Omit<User, 'id'>; // Alle Felder außer id

Kann man mit Pick eine nicht vorhandene Eigenschaft auswählen?

Nein, die Schlüssel K müssen zwingend Schlüssel des ursprünglichen Typs sein, sonst tritt ein Kompilierungsfehler auf.

Kann Pick die Optionalität oder readonly-Eigenschaften beeinflussen?

Pick behält die Modifikatoren der Eigenschaften (optional, readonly) bei, wenn sie im ursprünglichen Typ vorhanden sind; es kopiert sie einfach in den neuen Typ.

Typische Fehler und Antipatterns

  • Auflistung in Pick explizit als String ("id, name"), anstatt als Array von Schlüsseln, was zu Kompilierungsfehlern führt.
  • Auswahl nicht vorhandener Felder oder falsche Autogenerierung von Schlüsseln.
  • Verwendung von Pick an Stellen, wo eine Ausschluss- oder Änderungsfunktion erforderlich ist — dafür gibt es Omit, Partial, Required.

Beispiel aus dem Leben

Negativer Fall

Bei der Arbeit mit einem Eingabeformular hat der Entwickler einen eigenen Typ manuell beschrieben und dabei das neue erforderliche Attribut, das zu User hinzugefügt wurde, vergessen. Das Formular brach nach der Aktualisierung der Schnittstelle zusammen.

Vorteile:

  • Eindeutige Beschreibung der Struktur.

Nachteile:

  • Risiko der Veraltung des typedef, hohe Wahrscheinlichkeit von Bugs beim Refactoring.

Positiver Fall

Pick wird verwendet, um die benötigten Felder des Formulars auszuwählen:

type FormFields = Pick<User, 'email' | 'name'>;

Änderungen in User spiegeln sich automatisch im Formular wider.

Vorteile:

  • Garantierte Synchronisierung der Typen.

Nachteile:

  • Man muss kontrollieren, dass keine überflüssigen Felder ausgewählt werden, die in der Geschäftslogik des Formulars nicht unterstützt werden.