Dapatkan Jenis Lanjutan

Belum lama ini, saya menggali repositori tantangan tipe di ruang terbuka GitHub  . Saya memiliki keseluruhan blog tempat saya memecahkan masalah dari sana, tetapi hari ini saya akan mencoba menunjukkan tidak hanya implementasinya  Get



, tetapi juga menunjukkan masalah umum, menunjukkan peningkatan, dan penggunaan dalam produksi.

Jika Anda ingin membiasakan diri dengan konsep TypeScript yang diperlukan dalam artikel ini sebelum membaca, lanjutkan ke akhir.

Juga, artikel ini adalah terjemahan dari artikel yang saya tulis dalam bahasa Inggris. Jika tertarik, silakan .

1. Implementasi dasar

""

, ( )

?

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)

   
   
   
   
   

   

Terima kasih atas perhatiannya. Jika Anda punya saran, tulis di komentar. Selamat malam dan akhir pekan semuanya.