type-challenges を全問解いたのでエッセンスと推し問題を紹介してみる

@kakekakemiya （株式会社ナレッジワーク フロントエンドエンジニア）

TS Kaigi Hokuriku 2025（2025/11/23）での登壇資料です
https://hokuriku.tskaigi.org/

TypeScript の型への理解・型パズル力を高めるために、type-challenges は非常に有用な教材ですが、「問題数が結構多い」「なんだか難しそう」と、食わず嫌いをされがちである印象があります。
そこで本セッションでは、type-challenges の全問題に取り組んだ自分が、解く中で学んだ型パズルのテクニックや、実務に活かせそうな部分などを「エッセンス」として紹介します。

参考記事：【TypeScript と友達に】Type Challenges を全問解いたのでエッセンスと推し問題を紹介してみる
https://zenn.dev/kakekakemiya/articles/2d7a3384a5faf0
https://zenn.dev/kakekakemiya/articles/6ea6b327aec9ea

Transcript

1. type-challenges を全問解いたので エッセンスと推し問題を紹介してみる TS Kaigi Hokuriku 2025 @kakekakemiya
2. © Knowledge Work Inc. ⾃⼰紹介 2 @kakekakemiya 株式会社ナレッジワーク 新卒 フロントエンドエンジニア フロントエンドと焼き⿃が好きです （初登壇で⼤変緊張しています...）
3. © Knowledge Work Inc. みなさん、TypeScript の型パズルはお好きですか！？✋ 突然ですが... 3
4. © Knowledge Work Inc. 型パズル：特定の条件を満たす独⾃のユーティリティ型を作るパズル 型パズル 4
5. © Knowledge Work Inc. 型パズル：特定の条件を満たす独⾃のユーティリティ型を作るパズル → 型パズル‧型システムに詳しくなると何が嬉しい？ 型パズル 5
6. © Knowledge Work Inc. その1：複雑な型が「読める」 型パズルに詳しいと何が嬉しい？ 6
7. © Knowledge Work Inc. 型パズルに詳しいと何が嬉しい？ 7
8. © Knowledge Work Inc. その2：欲しい型が「書ける」 型パズルに詳しいと何が嬉しい？ 8
9. © Knowledge Work Inc. ネストされたオブジェクトの プロパティを全部 required にしたいな... 型パズルに詳しいと何が嬉しい？ 9 アプリ内のページの情報を型レベルで 管理したいな... snake_case を camelCase に変換したいな... 関数の引数‧返り値の型を うまく取り出したいな... 2つのオブジェクト型のプロパティの差を 取得したいな ※もちろん、メンテナンス性と旨味のバランスを考える必要はあります
10. © Knowledge Work Inc. 型パズルは便利で⾯⽩いが、慣れが⼤切 でも、意外と向き合う場⾯が少ない... 型パズルに詳しくなるには？ 10
11. © Knowledge Work Inc. 型パズルは便利で⾯⽩いが、慣れが⼤切 でも、意外と向き合う場⾯が少ない... → そこで有⽤なのが type-challenges !! 型パズルに詳しくなるには？ 11
12. © Knowledge Work Inc. type-challenges 12 https://github.com/type-challenges/type-challenges/blob/main/README.ja.md より
13. © Knowledge Work Inc. type-challenges 13 https://github.com/type-challenges/type-challenges/blob/main/README.ja.md より
14. © Knowledge Work Inc. type-challenges 14 https://github.com/type-challenges/type-challenges/blob/main/README.ja.md より 13問（+ お試し問題1問） 初級 103問 中級 55問 上級 17問 最上級
15. © Knowledge Work Inc. type-challenges 15 https://github.com/type-challenges/type-challenges/blob/main/README.ja.md より type-challenges には たくさん良質な問題があるが... • 初学者が気軽に取り組むには 問題数が多い！ • easy でも結構難しい
16. © Knowledge Work Inc. type-challenges 16 https://github.com/type-challenges/type-challenges/blob/main/README.ja.md より type-challenges には たくさん良質な問題があるが... • 初学者が気軽に取り組むには 問題数が多い！ • easy でも結構難しい → 全問題に取り組んで学んだ、 型パズルのエッセンスと推し問題を 紹介します！！
17. © Knowledge Work Inc. まずはお試し！！ Hello World #13（# は問題番号） お試し問題 17
18. © Knowledge Work Inc. 初級編 初級編 18
19. © Knowledge Work Inc. 最初の問題！ Pick #4 初級編 19
20. © Knowledge Work Inc. ジェネリクスに extends をつけると型に制約を設けられる MyType<T extends [制約]> Object 型に対して keyof を利⽤すると property の union を取得できる エッセンス 20
21. © Knowledge Work Inc. 公式による Pick の実装 も同じ 余談 21
22. © Knowledge Work Inc. 学びの多い良問！！ First of Array #14 初級編 22
23. © Knowledge Work Inc. 初級編 23
24. © Knowledge Work Inc. 初級編 24 この問題はこれで OK だが、↓のような問題だとどうなるか？ • Second<T>: ⼆つ⽬の要素を取得する • Last<T>: 最後の要素を取得する
25. © Knowledge Work Inc. 初級編 25 infer を使って、好きなところの型を推論してもらう → よりスマートに所望の部分の型を取り出せる！！
26. © Knowledge Work Inc. 初級編 26 infer を利⽤することで複雑な三項演算のネストを避けられる！！
27. © Knowledge Work Inc. エッセンス 27 extends による型の三項演算は⾮常に重要 infer は「ここに⼊る型って何？」ってのを推論してくれる便利な機能 extends とともに利⽤する
28. © Knowledge Work Inc. ユーティリティ型である ReturnType などでも infer は利⽤されている 余談 28
29. © Knowledge Work Inc. 型パズルの必須テクを学ぶ！ Awaited #189 初級編 29
30. © Knowledge Work Inc. 初級編 30
31. © Knowledge Work Inc. 初級編 31 Promise を外したものを次の Payload にして再帰している
32. © Knowledge Work Inc. エッセンス 32 複雑な型パズルを解く上で、再帰的な型は必須テクニック infer と組み合わせて、次のジェネリクスに渡す型を組み⽴てる
33. © Knowledge Work Inc. 中級編 中級編 33
34. © Knowledge Work Inc. 知っていると便利な⽂字列の処理 #Trim 108 中級編 34
35. © Knowledge Work Inc. 中級編 35
36. © Knowledge Work Inc. 中級編 36 string に対しても infer を利⽤することができる！！
37. © Knowledge Work Inc. 中級編 37 string に対しても infer を利⽤することができる！！ → Template Literal Types のおかげ
38. © Knowledge Work Inc. 中級編 38 Template Literal Types の例 ①
39. © Knowledge Work Inc. 中級編 39 Template Literal Types の例 ②
40. © Knowledge Work Inc. string に対しても infer を利⽤することができ、⽂字列の処理に便利 Template Literal Types は知っておくと表現⼒が広がる エッセンス 40
41. © Knowledge Work Inc. 型パズルの癖が詰まった難問 Permutation #296 中級編 41
42. © Knowledge Work Inc. 中級編 42
43. © Knowledge Work Inc. 中級編 43 まず、union の挙動について
44. © Knowledge Work Inc. 中級編 44 まず、union の挙動について
45. © Knowledge Work Inc. 中級編 45 まず、union の挙動について
46. © Knowledge Work Inc. 中級編 46 union の extends 適⽤時には分配則がはたらく （※分配則は算数でいうところの「a×(b + c) = a×b + a×c 」のイメージ)
47. © Knowledge Work Inc. 中級編 47 となると、Permutationをつくるなら
48. © Knowledge Work Inc. 中級編 48 となると、Permutationをつくるなら どうやって計算する...？（T はもう分配されてしまっている...）
49. © Knowledge Work Inc. 中級編 49 分配される T とは別に、分配前の T を保存する → K は extends されないので、分配が発⽣しない！！ ということで、めでたしめでたし
50. © Knowledge Work Inc. 中級編 50 never の挙動について
51. © Knowledge Work Inc. 中級編 51 never の挙動について // never になる！！
52. © Knowledge Work Inc. 中級編 52 T extends … の T に never が渡ると、到達不能な union になり never が返る 先ほどの↓でも、再帰の最後で never を extends してしまっていた 参考：https://github.com/microsoft/TypeScript/issues/23182#issuecomment-379094672
53. © Knowledge Work Inc. 中級編 53 なので、never が渡ってきた際の extends を防いであげると OK
54. © Knowledge Work Inc. エッセンス 54 union に対して extends を利⽤すると、分配則が適⽤される never はジェネリクスとして extends されると、到達不能だと解釈される → 型引数の利⽤や [] での wrap など、分配をうまく制御するのが重要
55. © Knowledge Work Inc. 上級‧最上級編 上級‧最上級編 55
56. © Knowledge Work Inc. これぞパズル IsAny #223 上級‧最上編 56
57. © Knowledge Work Inc. 上級‧最上級編 57 Any の判定ってどうやるんだろう...
58. © Knowledge Work Inc. 上級‧最上級編 58 Any の判定ってどうやるんだろう...
59. © Knowledge Work Inc. 上級‧最上級編 59
60. © Knowledge Work Inc. エッセンス 60 型パズル上で交差型が利⽤できると痒いところに⼿が届くことがある Union to Intersection #55 なども類題としておすすめ
61. © Knowledge Work Inc. 型でこんなこともできる！ Subtract #7561 上級‧最上編 61
62. © Knowledge Work Inc. 上級‧最上編 62 type-challenges では、数字を扱う問題も存在 最終的には、⾜し算‧引き算‧掛け算を実装 Subtract はこの中では⼀番シンプルで学びが多い
63. © Knowledge Work Inc. 上級‧最上編 63
64. © Knowledge Work Inc. 上級‧最上編 64 数字を扱うときは配列を利⽤する！！
65. © Knowledge Work Inc. 上級‧最上編 65 ⻑さ N の配列の型を作る
66. © Knowledge Work Inc. 上級‧最上編 66 A の配列 = [...Bの配列, infer 残り] とする
67. © Knowledge Work Inc. 上級‧最上編 67 残りの配列の⻑さを取得
68. © Knowledge Work Inc. 上級‧最上編 68 数字など複雑な型を扱うときの注意点
69. © Knowledge Work Inc. 上級‧最上編 69 エラーを期待している
70. © Knowledge Work Inc. 上級‧最上編 70 Type instantiation is excessively deep and possibly infinite.(2589) というエラーが発⽣ → 再帰回数の上限に到達して、型エラーとなる
71. © Knowledge Work Inc. エッセンス 71 型レベルで数字を扱いたい場合は、配列を利⽤するのが鉄則 複雑な型を作るときは、再帰回数の上限に注意！
72. © Knowledge Work Inc. 最後に 72 今⽇の発表によって • TypeScript の型がより好きになった • 型パズルに興味が沸いた ⽅がいらっしゃると幸いです！
73. © Knowledge Work Inc. 最後に 73 ↑から⾶べます！