Advanced Typed Get

少し前に、GitHubのオープンスペースにタイプチャレンジリポジトリを掘り起こしました 。そこから問題を解決するブログ全体がありますが、今日は実装だけでなく、 Get



一般的な問題のデモンストレーション、改善点、本番環境での使用についても説明します。

読む前に、この記事で必要なTypeScriptの概念を理解したい場合は、最後までスキップしてください。

また、この記事は私が英語で書いた記事の翻訳です。興味があれば、先に進んでください。

1.基本的な実装

""

, ( )

?

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)

   
   
   
   
   

   

ご清聴ありがとうございました。何か提案があれば、コメントに書いてください。みなさん、素敵な夜と週末をお過ごしください。