ProgrammatieFrontend ontwikkelaar

Wat zijn distributieve types in TypeScript, waar worden ze toegepast en welke kenmerken moeten in overweging worden genomen bij het werken ermee?

Slaag voor sollicitatiegesprekken met de Hintsage AI-assistent

Antwoord

Distributieve types zijn een kenmerk van TypeScript dat zich manifesteert bij het werken met conditionele types (T extends U ? X : Y). Wanneer de type-variabele links van extends een vereniging (union) is, verdeelt TypeScript de voorwaarde over elk element van de vereniging.

Voorbeeld:

// "Test<A> | Test<B> | Test<C>" type Test<T> = T extends string ? () => string : () => number; type Result = Test<'A' | 'B' | 'C'>;

Hier wordt Result verdeeld als:

  • Test<'A'> | Test<'B'> | Test<'C'>

Wanneer te gebruiken — voor het schrijven van universele API's, manipulaties van verenigingen, bijvoorbeeld voor filtering of patroonmatching.

Kenmerken:

  • Als je T in een tuple [T] wikkelt, vindt de verdeling niet plaats. Dit is een manier om de verdeling "uit te schakelen".
  • De verdeling werkt alleen voor type-variabelen (en niet voor literals).

Vragend dilemma

Vraag: Zal het type T[] extends number[] ? true : false distributief zijn?

Correct antwoord: Nee, de verdeling vindt alleen plaats als links van de variabele-type geen array of tuple omhulsel is. Bijvoorbeeld, het conditionele type T extends number ? ... zal verdelen, maar T[] extends number[] ? ... — niet.


Voorbeelden van echte fouten door gebrek aan kennis van de nuances


Verhaal

Project: Een bibliotheek voor het valideren van props voor React-componenten. We wilden een type implementeren dat union-props in een strikte interface omzet, maar door gebrek aan kennis over de verdeling werd het type onverwacht complex (eigenschappen van union-leden raakten vermengd). We hebben dit gecorrigeerd door de wrapper [T] toe te voegen, zodat de verdeling niet plaatsvond.


Verhaal

Project: We ontwikkelden een functie-handler voor alle evenementtypes. In het conditionele type werd verwacht dat de functie elk evenementtype via verdeling zou accepteren, maar zonder dit expliciet te gebruiken, implementeerden we de verwerking verkeerd, wat leidde tot foutieve argumenttypes (union in plaats van een aparte aanroep voor elk type).


Verhaal

Project: Bij het creëren van onze eigen utility-types (zoals Exclude, Extract) vergaten we dat de verdeling niet zou plaatsvinden voor tuples en arrays. Als gevolg werkte het type Exclude niet voor arrays (bijvoorbeeld, het type Exclude<["a"|"b"], "b"> verwijderde "b" niet).