Obtention typée avancée

Il n'y a pas si longtemps, j'ai déniché un référentiel de type-challenges sur les espaces ouverts de GitHub  . J'ai tout un blog où je résous des problèmes à partir de là, mais aujourd'hui, je vais essayer de montrer non seulement la mise en œuvre  Get



, mais aussi de démontrer les problèmes courants, de montrer les améliorations et l'utilisation en production.

Si vous souhaitez vous familiariser avec les concepts TypeScript requis dans cet article avant de lire, passez à la fin.

De plus, cet article est la traduction d'un article que j'ai écrit en anglais. Si vous êtes intéressé, allez-y .

1. Mise en œuvre de base

""

, ( )

?

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] 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. 
   
   
   
   

3. 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)

   
   
   
   
   

   

Merci à tous pour votre attention. Si vous avez des suggestions, écrivez dans les commentaires. Passez une bonne soirée et un week-end à tous.