ProgrammatieFrontend ontwikkelaar

Hoe werkt Pick in TypeScript, waarvoor is dit hulptype nodig, en wat is het verschil met Omit?

Slaag voor sollicitatiegesprekken met de Hintsage AI-assistent

Antwoord.

Het hulptype Pick<T, K> is toegevoegd aan TypeScript om het probleem van selectieve kopie van een deel van de velden uit een bestaande type of interface op te lossen.

Geschiedenis van de vraag

Vaak worden dezelfde datastructuren met kleine variaties opnieuw gebruikt tijdens de ontwikkeling. Voor de komst van Pick moest men nieuwe interfaces maken door de benodigde velden handmatig te kopiëren, wat leidde tot duplicatie van code en fouten bij toekomstige wijzigingen van de oorspronkelijke structuren.

Probleem

Het is nodig om de invoer- of uitvoergegevens van een functie te typeren, waarbij alleen een deel van de velden van een grote interface wordt gebruikt, om overbodigheid te voorkomen en het contract maximaal te specificeren.

Oplossing

Pick lost de taak van het isoleren van een subset van eigenschappen van type T op basis van sleutels K:

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

Voorbeeld:

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

Belangrijke kenmerken:

  • Vormt een nieuw type met alleen de benodigde sleutels;
  • Zeer handig voor het typeren van select-vragen, formulieren, uitvoer;
  • Minimaliseert de hoeveelheid handmatige code en fouten bij refactoring.

Lastige vragen.

Wat is het verschil tussen Pick en Omit?

Pick selecteert alleen de genoemde velden van het type; Omit sluit ze juist uit uit de structuur.

type PartialUser = Omit<User, 'id'>; // Alle velden behalve id

Kan Pick gebruikt worden om een niet-bestaande eigenschap te selecteren?

Nee, de sleutels K moeten verplicht sleutels zijn van het oorspronkelijke type, anders ontstaat er een compilatiefout.

Kan Pick invloed hebben op de optionele of readonly velden?

Pick behoudt de modifiers van eigenschappen (optioneel, readonly) als deze in het oorspronkelijke type aanwezig waren, het kopieert ze alleen naar het nieuwe type.

Typische fouten en anti-patronen

  • Het expliciet vermelden van velden in Pick als een string ("id, name"), en niet als een array van sleutels, wat leidt tot compilatiefouten.
  • Het kiezen van niet-bestaande velden of onjuiste autogeneratie van sleutels.
  • Het gebruik van Pick waar een uitsluiting of wijziging van eigenschappen vereist is — daarvoor zijn Omit, Partial, Required.

Voorbeeld uit het leven

Negatieve case

Bij het werken met een invoervorm heeft de ontwikkelaar een eigen type handmatig beschreven, daarbij een nieuwe verplichte attribuut vergeten die aan User was toegevoegd. De vorm is stuk gegaan na de update van de interface.

Voordelen:

  • Duidelijke beschrijving van de structuur.

Nadelen:

  • Risico van veroudering van typedef, hoge kans op bugs bij refactoring.

Positieve case

Pick wordt gebruikt om de benodigde velden van de vorm te selecteren:

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

Wijzigingen in User worden automatisch weerspiegeld in de vorm.

Voordelen:

  • Gegarandeerde synchronisatie van typen.

Nadelen:

  • Men moet controleren dat er geen overbodige velden worden geselecteerd die niet worden ondersteund in de bedrijfslogica van de vorm.