适合初学者学习 TypeScript 的类型挑战

概述

我从来没有正确接触过 TypeScript，所以我在使用类型挑战时尝试学习 回答所有问题 我尝试过了。 （截至 2022 年 9 月 21 日）
我打扮好了，但是只有13个问题，所以很快。

我已经尝试了大约80％的中级，并且在某种程度上我看到了一些关于如何处理这种情况的提示和技巧，所以我也将其总结一下。

答案提示

拆分数组

.ts

  // T が any[] の場合 
 T   extends   [...  infer   A  ,   infer   B  ]   ?   A   :   never 

 // 上記の例では、T = [1,2,3,4] であれば、 A には [1,2,3], B には 4 が入る 
 // T が [] の場合、 never が返る 
 

拆分字符串

.ts

  // T の最初の文字がLに入り、残りがRに入る 
 T   extends   `  ${  infer   L  }${  infer   R  }  ` 

 // T が xxxxhoge である場合、 X に xxxx が入る 
 T   extends   `  ${  infer   X  }  hoge` 
 

使数组成为联合类型

.ts

  T  [  number  ] 

 // 使用例 
 type   TupleToUnion  <  T   extends   unknown  []  >   =   T  [  number  ] 
 TupleToUnion  <  [  123  ,   '  456  '  ,   true  ]  >   //=> 123 | '456' | true  
 

使用联合类型（映射类型）创建对象类型

.ts

  // K は文字列だと 1つのプロパティを持つオブジェクト型になるが、 
 // K がユニオン型だと、各型をプロパティとして持ったオブジェクト型になる 
 // 右辺(valueに該当する箇所) は P 以外でももちろん良い 
 // プロパティのキーは string | number | symbol 型である必要がある 
 // 下の例で言えば、 K extends string | number | symbol である必要がある 
 {   [  P   in   K  ]:   P   } 


 // 特定のプロパティのみ残したい場合 
 // KからPを作り、そのPについて、Xを満たすかどうかで分岐をかける。 
 // never が返ってきた場合、生成されるオブジェクト型からそのプロパティは排除される 
 {   [  P   in   K   as   P   extends   X   ?   P   :   never  ]:   P   } 
 

获取数组中的元素个数

这通常在以数字作为条件进行分支时使用。
A['length'] extends 5 ? treu : false ← 这种用法用于重启处理。

.ts

  type   A   =   [  1  ,  2  ,  3  ] 
 A  [  '  length  '  ]   // => 3 

 //　ちなみに、string型に対して、同じ容量で文字数を出すことはできない 
 type   S   =   "  string  " 
 S  [  '  length  '  ]   // => number  
 

检查它们是否完全相同

.ts

  Equal  <  A  ,   B  >   extends   true   ?   真の場合   :   偽の場合 

 // A が false, B が boolean の場合に 
 // A extends B だと true になる 
 // このケースで false にしたい場合は Equal<A, B> を使う 
 

下面回答

4-Pick.ts

  // K の型を縛る点がミソ 
 type   MyPick  <  T  ,   K   extends   keyof   T  >   =   { 
   [  P   in   K  ]:   T  [  P  ] 
 } 

 // 以下は間違い。  
 // K の型が定まっていないので、以下の点で明確ではなくなるので型エラーがでる 
 // 1. Kがプロパティキーに入れられる型かどうか、 
 // 2. Kから取り出したプロパティPがTのキーとして利用できる型かどうか 
 // type MyPick<T, K> = { 
 //  [P in K]: T[P] 
 // } 
 

7-Readonly.ts

  // readonly を各プロパティに付けているだけ 
 type   MyReadonly  <  T  >   =   { 
   readonly   [  P   in   keyof   T  ]:   T  [  P  ] 
 } 
 

11 - 元组到 Object.ts

  // 配列をユニオン型に変換するテクニック、 T[number] を使えば良い 
 // PropertyKey は、プロパティーキーに入れることができる型のユニオン型 string | number | symbol と同義 
 type   TupleToObject  <  T   extends   readonly   PropertyKey  []  >   =   { 
   [  P   in   T  [  number  ]]:   P 
 } 
 

14 - Array.ts 的第一个

  // 配列の最初 or 最後を取り出す時に infer を使うやり方 Array extends [infer F, ...infer B] 
 // T extends Tの条件 ? 合致する場合の型 : 合致しない場合の型 
 type   First  <  T   extends   any  []  >   =   T   extends   [  infer   A  ,   ...  infer   B  ]   ?   A   :   never 

 // 以下は T が [undefined] の場合に never が返ってしまう 
 // type First<T extends any[]> = T[0] extends undefined ? never : T[0] 

 // 一番簡単なやり方 
 type   First  <  T   extends   any  []  >   =   T   extends   []   ?   never   :   T  [  0  ] 
 

18 - 元组的长度.ts

  // 配列から要素数を抜き出すやり方 T['length'] 
 // 問題で渡される配列は as const がついているので、 型引数の中に readonly が必要 
 type   Length  <  T   extends   readonly   unknown  []  >   =   T  [  '  length  '  ] 
 

43 - 排除.ts

  // ユニオン型から特定の条件に合致する別のユニオン型を作る 
 // U と合致した型 T のみを使ったユニオン型を作っている 
 type   MyExclude  <  T  ,   U  >   =   T   extends   U   ?   never   :   T 
 

189 - 等待.ts

  // MyAwaited<T extends Promise<unknown>> で Promise型だけ引数にとるようにします 
 // T extends Promise<infer A> で 引数の型をAとして取り出します 
 // A extends Promise<unknown> で、Aが Promise型かどうかで分岐をかけています 
 type   MyAwaited  <  T   extends   Promise  <  unknown  >>   =   T   extends   Promise  <  infer   A  > 
   ?   A   extends   Promise  <  unknown  > 
     ?   MyAwaited  <  A  > 
     :   A 
   :   never 
 

第268节

  // extends を用いた三項演算子の基礎のような問題 
 type   If  <  C   extends   boolean  ,   T  ,   F  >   =   C   extends   true   ?   T   :   F 
 

第533章

  type   Concat  <  T   extends   unknown  [],   U   extends   unknown  []  >   =   [...  T  ,   ...  U  ] 
 

898 - 包括.ts

  type   Includes  <  T   extends   readonly   any  [],   U  >   =   T   extends   [  infer   A  ,   ...  infer   B  ] 
   // ここが A extends U, もしくは U extends A だと  
   // [A, U]に [boolean, true] または [true, boolean] などの組み合わせがある場合に 
   // true 扱いになってしまうので、 Equal<>を使う 
   ?   Equal  <  A  ,   U  >   extends   true 
     ?   true 
     :   Includes  <  B  ,   U  > 
   :   false 
 

第3057章

  type   Push  <  T   extends   unknown  [],   U  >   =   [...  T  ,   U  ] 
 

第3060章

  type   Unshift  <  T   extends   unknown  [],   U  >   =   [  U  ,   ...  T  ] 
 

3312 - 参数.ts

  //  (...args: any[]) => any と Function は 同義 
 // 関数型の引数の型を infer で A に移し、それをそのまま返している 
 // T は関数型なので、T extends (...args: infer A) => unknown が合致しないケースは無いので、 
 // 三項演算子の不一致時の戻り値は never 
 type   MyParameters  <  T   extends   Function  >   =   T   extends   (...  args  :   infer   A  )   =>   unknown 
   ?   A   :   never 
 

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308626539.html

查看更多关于适合初学者学习 TypeScript 的类型挑战的详细内容...