Advanced Typed Get

Nicht so lange her, grub ich ein up - Typ-Herausforderungen Repository auf den offenen Räumen von GitHub  . Ich habe einen ganzen Blog, in dem ich Probleme von dort aus löse, aber heute werde ich versuchen, nicht nur die Implementierung zu zeigen  Get



, sondern auch häufige Probleme aufzuzeigen, Verbesserungen aufzuzeigen und in der Produktion zu verwenden.





Wenn Sie sich vor dem Lesen mit den in diesem Artikel erforderlichen TypeScript-Konzepten vertraut machen möchten, fahren Sie mit dem Ende fort.





Außerdem ist dieser Artikel eine Übersetzung eines Artikels, den ich auf Englisch geschrieben habe. Wenn Sie interessiert sind, fahren Sie fort .





1. Grundlegende Implementierung

""





, ( )





?





1.1.

, JavaScript:





,  keys.reduce



, . JavaScript split



. TypeScript - .





TypeScript 4.1,  Template Literal types. .  Path



  :





. , ( ).  Playground. :





. Playground.





1.2. Reducer

, , - keys.reduce



. ,  GetWithArray



 , K







:





  1. K extends [infer Key, ...infer Rest]



     ,





  2. Key extends keyof O



       O[Key]



     





 ( Playground). , . :





Playground





1.3.

, : Playground. , .





2.

production, , . ?



, null



undefined



.





Playground. , TypeScript .





. - :





,  undefined



 or null



. .





2.1. undefined, null

3 :





,  undefined



 / null



  union type, , . "" .





, ,  Playground





2.2. reducer

GetWithArray



:





  1. , undefined



    / null







  2. , ( undefined



    )





, (  Playground).





3.

:





JavaScript :





,  string



  number



, Path



:





3.1. Reducer

,  keys.reduce



 . TypeScript  GetWithArray



 . ,  GetWithArray



  .





. A



  O



  :





 Playground, :





  1.  string



     :





     '1' extends keyof string[]



      ,  never



    .





  2. readonly







  3. [0, 1, 2]



    )  never



      undefined



    :





.





3.2. T | undefined

 T | undefined



( , ), T



:





 A extends readonly (infer T)[]



 , .. ( readonly



) .





, .  Playground.





3.3.

, , ( undefined



)





, , extends



( ExtendsTable



) , :





4 :





  1. [0]







  2. number[]







  3. readonly number[]







  4. any[]







, , :













[0]







number[]







readonly number[]







any[]







[0]























number[]























readonly number[]























any[]























✅ , , . :





  • [0] extends [0]







  • number[] extends readonly number[]







, ❌, , . :





  • number[] extends [0]







  • readonly number[] extends number[]







 any[]



:  [0]



  ❌, () – ✅.





, !





any[] extends A



 GetWithArray



:





  1.  any[] extends A







  2.  T | undefined







  3. , ,





  4. ,  undefined







,  Playground.





4.

:





:





:  ExtractFromObject



  ExtractFromArray



, , , :





(Generic Constrains):





  1. ExtractFromObject



     –  O extends Record<PropertyKey, unknown>



    . , O







  2. ExtractFromArray



     :  A extends readonly any[]







 GetWithArray



:





.  Playground.





5. JavaScript

JavaScript:





 lodash



  ,  get



.  common/object.d.ts @types/lodash



, .  get



  any



 : typescript-lodash-types





 reduce



   for



( for-of



), , undefined



null



:





 get



 , . :





  1. Get



      ,





  2. - (, )





, function



, :





.  Get



 :





 Codesandbox:





  1. get











  2. get







Summary

TypeScript:





  1.   TypeScript 1.3,  (Variadic Tuple Types) 4.0, spread





  2. (Conditional types)  TypeScript 2.8





  3. infer



      , TypeScript 2.8





  4. (Recursive conditional types) TypeScript 4.1





  5. (Template Literal types) TypeScript 4.1





  6. (?) (Generic Constrains)





  7. (Function Overloads)





Vielen Dank für Ihre Aufmerksamkeit. Wenn Sie Vorschläge haben, schreiben Sie in die Kommentare. Habt alle einen schönen Abend und ein schönes Wochenende.








All Articles