忙しい人のためのtype-challengesおすすめ問題
はじめに
type-challengesはTypeScriptの型を手を動かしながら学べる優れた問題集です。
初級〜最上級までレベル別に別れており、徐々にステップアップしながら学習することが可能です。
問題数も豊富で、2023年6月現在初級〜最上級で合計158問もの問題が公開されています。
問題数が豊富なのは素晴らしいことなのですが、全てを解こうとすると骨が折れます...
自分は最近まで1日1問type-challengesを解くという活動をしていて、（ほぼ）全ての問題を解き終わるのに約4ヶ月かかりました。振り返ってみると、中には類題も多く含まれていてTypeScript力を効率良く付けるのに必ずしも全ての問題を解く必要はありませんでした。
問題を一通り見た中で、特に勉強になった問題を、備忘録かつ他の人に少しでも参考になればと思いまとめます。（独断と偏見です。なるべく種類が異なる問題を選んだつもりです。）
type-challengesとは？やtype-challengesによる効果などは別の記事に書いたので気になった方は是非そちらを読んでください！（思ったより反響いただけてびっくりしました）
初級編
初級編は全13問あります。（2023年6月現在）
中級編、上級編の基礎になる問題が集められています。
TypeScriptに備わっている基本のユーティリティ型を自分で実装する問題（Pick, Readonly, Exclude, Parameters）やJavaScriptのutil関数（Includes、Concatなど）を実装する問題が多いです。
基本的に文法を知っているかどうかが問われる問題なので、最初はできなくても全く心配ないです！書き方を知れれば十分です！（自分は全然できなかったです）
おすすめ問題
13問のうち、似たような種類の問題を削って10問ピックアップしました。（まとめると言っておいて全然減らせませんでした...）
つぶやきをひとこと欄に書いています。
| 問題 | タイプ | ひとこと |
|---|---|---|
| Pick | Mapped Types | |
| Readonly | Mapped Types | |
| Tuple To Object | Mapped Types | |
| If | Conditional Types | |
| First of Array | Conditional Types | |
| Includes | Conditional Types | 再帰。初級で一番難しいかも。 |
| Parameters | Conditional Types | 関数のinfer。類題にReturn Typeがある。 |
| Exclude | Conditional Types | Distributive Conditional Types（Union distribution）の知識が一部必要 |
| Length of Tuple | 配列 | |
| Concat | 配列 |
中級編
中級編は問題数が非常に多く、全部で86問あります。（2023年6月現在）
おすすめしたい問題が多く選定が非常に難しかったので、おすすめ問題14問と、準おすすめ問題11問をなるべく種類が異なるように選びました。
おすすめ問題
| 問題 | ひとこと |
|---|---|
| Omit | 基本のユーティリティ |
| DeepReadonly | 実際に使う機会ありそう |
| TupleToUnion | 知識問題 |
| Chainable Options | 難しかった。実践的。 |
| Promise.all | 上級編でも良いくらい難しい気がする |
| Trim left | 文字列（Template Literal Types）系 |
| Capitalize | 同じく文字列系 |
| KebabCase | SnakeCaseやCamelCaseなど他のCaseにも応用可能 |
| IsNever | 知識問題 |
| Permutation | Union distributionの理解が求められる良い問題。 |
| IsUnion | PermutationとこれができればUnion distribution理解できてそう。 |
| AllCombinations | Permutation, IsUnionの応用 |
| ReplaceKey | Mapped typeのdistribution |
| MinusOne | 数値を計算する問題はいろいろ出てくる |
準おすすめ問題
こちらは惜しくもおすすめ問題から漏れた問題たちです。おすすめ問題に類題がありますが、これらの問題を解くことでさらに理解を深められると思います。
| 問題 | ひとこと |
|---|---|
| Append to object | |
| Diff | |
| Remove Index Signature | 難しい。解けなくても良いかも。 |
| Mutable | これも知識系 |
| FlattenDepth | |
| Flip | |
| Fibonacci Sequence | 数値系 |
| MapType | |
| GetMiddleElement | あまり見かけないタイプ。面白い。 |
| Transpose | 難しい |
| Combination key type | Union distribution系 |
上級編
上級編は中級編と似たパターンの問題が多かったので、中級にはなかった種類の問題をピックアップしました。
おすすめ問題
ひとこと欄にも書いている通り、自力実装はかなり難しい問題です。
解けなくても型で表現できることを知るだけで、引き出しが増えて良いと思います。
| 問題 | ひとこと |
|---|---|
| Simple Vue | 初見では何も思いつかなかった。知っておくと良さそう |
| Union To Intersection | 初見でできたら天才だと思う。型でこれを表現できることを知っておくくらいで良さそう |
| Union To Tuple | これも初見殺し。同じく型で表現可能なことを知っておくくらいで良さそう。 |
| IsAny | これも知っておくくらいで良さそう |
| ClassPublicKeys | 類似問題なかったので選出 |
| String to Number | 実装が面倒 |
準おすすめ問題
こちらは今まで似たタイプの問題を扱っているので解かなくても良いですが、復習と頭の体操に良いかもしれません。
| 問題 | ひとこと |
|---|---|
| Vue Basic Props | Simple Vueの類似問題 |
| Pinia | Simple Vueの類似問題 |
| Currying 1 | |
| Tuple Filter | |
| Object From Entries | |
| Tree path array |
最上級編
最上級編は全部で14問あり（2023年6月現在）、どれも超難しいです。
個人的にその中でも難しかった8問をピックアップしました。
このレベルの実装が必要になるケースはほとんどないと思うのでやらないでも良いと思います。（自分は一旦諦めて気が向いたときに再チャレンジすることにしました）
おすすめ問題
| 問題 | ひとこと |
|---|---|
| slice | |
| Integers Comparator | |
| Currying 2 | 上級編のCurrying 1の応用編 |
| Tag | |
| Sort | 型でSortをやらせるとは... |
| Distribute Unions | |
| Assert Array Index | |
| JSON Parser | 型でJSON parseさせるとは... |
おすすめのやり方
問題を絞ってまとめましたが、それでもまだボリュームがあるので遊び感覚でコツコツやるのがおすすめです。
以前解いた問題と似た考え方で解ける問題や、前に解いた問題の型を利用すると実装が楽になる問題があるので、解いた問題の解答や考え方はどこかにまとめておくと良いです。（自分はzennのスクラップにまとめていました）
終わりに
type-challengesの初級〜最上級まで独断と偏見でおすすめ問題をまとめました。
type-challengesやってみたかったけど問題数多すぎてチャレンジできてない...という人は是非ここにまとめた問題からチャレンジしてみてください！（それでもまだ問題数多いですが...）
ここに入れなかった問題以外にも良い問題がたくさんあるので余裕がある方は是非他の問題もやってみてください！
Discussion