高度な型付け、どう教える？

TSKaigi 2025 の Session「高度な型付け、どう教える？」の発表資料です。
https://2025.tskaigi.org/talks/progfay

リンク集:
Deep Readonly · type-challenges/type-challenges - GitHub
DeepReadonly を教えるサンプルプログラム - TypeScript Playground
AI に TS の「型定義」→ JS の「下書き」変換をさせる - Gemini

Transcript

1. 2025.05.23 | TSKaigi 2025 | @progfay 高 度な型付け、どう教える？
2. Name: 眞野 隼 輔 ま の しゅんすけ    @progfay ・ Web Frontend Engineer ・ 普段は Web の動向を追っかけている ɾ型パズルは独学で習得 🧩
3. 今 日 は「 高 度な型付けの教え 方 の提案」をします
4. 発表の想定対象者 高 度な型付けを 「教える」 人 向け ✅ ⚠「学ぶ」 人 向けではない ❌
5. ・ 以下などを組み合わせて型を作ること ɾGenerics: Hoge<T> ɾConditional Types: T extends U ? A : B ɾMapped Types: { [K in keyof T]: string } ɾRecursive Types ・ 特に「理解や実装が難しいもの」を指す 高 度な型付け とは
6. ・ 型の恩恵を得るためには、 高 度な型付けをしたいときが稀にある ・ 高 度な型付けは誰でも読み書きできるものではない ・ メンバーが理解できないコードは負債になる 高 度な型付けを教える必要はあるのか？ 諦める？ or メンバーにも書けるようになってもらう！
7. 1 . 書き 手 が処理の流れをイメージしづらい • 初 手 で型レベルプログラミングの 心 理的 ・ 技術的ハードルが 高 い 2 . debug がしづらい • 一 時変数や console.log が使えない 3 . TypeScript の挙動に癖がある • Distributive Conditional Types • (() => {}) extends Record<any, any> ? true : never 高 度な型付けの課題
8. 提案 ɹ で「下書き」→ ɹ に「翻訳」 慣れ親しんだ 言 語で処理の流れを把握して 型レベルプログラミングに置き換えていく
9. 「下書き」の恩恵 ・ 心 理的ハードルを下げられる ・ 処理や思考の整理ができる ・ debug が可能になる
10. 「翻訳」
11. • JS ⁶ TS は完全には対応しない • optional property や readonly, Union は JS でどう表現する？ • 生 徒が困らないよう、教師が場を整えてあげる必要がある • TypeScript 特有の癖はそのまま • JS → TS に変換したら謎の挙動になることもある • 体当たりで学ぶ or TypeScript ͷ࢓༷ΛֶͿඞཁ͕͋Δ 「翻訳」の注意点
12. 1 . JavaScript で「下書き」 2 . TypeScript に「翻訳」 3 . 意図通りの型付けができているか確認する 4 . 上 手 くいくまで 1 ~ 3 を繰り返す 高 度な型付けの流れ
14. 「下書き」のための Helper
15. deepReadonly(t)
16. deepReadonly(t) → DeepReadonly<T>
17. deepReadonly(t) → DeepReadonly<T>
18. deepReadonly(t) → DeepReadonly<T>
19. deepReadonly(t) → DeepReadonly<T>
20. deepReadonly(t) → DeepReadonly<T>
21. deepReadonly(t) → DeepReadonly<T>
22. deepReadonly(t) → DeepReadonly<T>
23. DeepReadonly<T>
24. DeepReadonly<T> なぜ？🤔
25. Function は Record の sub type → Mapped Types に 入 れると {} になる TypeScript 特有の癖
26. deepReadonly(t) を改良
27. DeepReadonly<T>
28. DeepReadonly<T>
29. DeepReadonly<T> 🎉🎉🎉
30. • 対象: 高 度な型付けに馴染みのないエンジニア 3 名 • 形式: ペアプロ形式で DeepReadonly<T> を書く • 結果: 20 分ほどで書けた！ • 感想: • 従来の課題だった「最初から型レベルプログラミング」が解消されていた！ • 再帰処理の実装は不慣れだったが、debug しながらだったので何とか書けた • この形式で何度か経験を積めば、書けるようになるかも？ 実践してみた
31. 良いところ👍 と 悪いところ👎 を振り返ろう しかし万能な 手 法ではない
32. なんか変なのいるぞ...？ 「下書き」のための Helper 再 掲
33. • JS での「下書き」ができればいい • configurable: false にしなくていい • ただし書き味にはこだわりたい • テスト可能にしたい JS ͷ readonly を TS の書き味に近づけたい
35. readonly(t[key]) と書くためには __readonly property を 生 やす
36. • string literal (property が 生 やせない) • "str" • String("str") • String object (property が 生 やせる！) • new String("str") 👎 学びやすい Helper 関数を 用 意するのが難しい
37. 👍 慣れ親しんだ 言 語で書き出せる 👍 debug できる 再 掲 deepReadonly(t)
38. deepReadonly(t) → DeepReadonly<T> 👎 JS → TS の翻訳が 自 明ではない 再 掲
39. DeepReadonly<T> 👎 TypeScript 特有の癖は残る 再 掲
40. 👍「下書き」に戻って考え直せる 再 掲 DeepReadonly<T>
41. • 良いところ👍 • 慣れ親しんだ 言 語で書き始められる • debug できる • 「下書き」に戻って考え直せる • 悪いところ👎 • 学びやすい Helper を 用 意するのが難しい • JS → TS の変換が 自 明ではない • TypeScript 特有の癖は残る } 生 徒が学びやすくなる } 教師の下準備や教え 方 が難しい
42. 下準備を AI にやらせてみた • DeepReadonly<T> で one-shot prompting • PickByType<T, U> を JavaScript の「下書き」に 変換してもらった
43. 下準備を AI にやらせてみた
44. 下準備を AI にやらせてみた 下準備の難しさを緩和できそう！
45. • 問題: 高 度な型付けは処理の流れがイメージしづらく、 debug もしづらい • 提案: 　 で「下書き」→ 　 に「翻訳」 • 実演: DeepReadonly<T> を例に教え 方 の流れを説明した • 評価: 教師の下準備の難易度が 高 いが、 生 徒は 比 較的学びやすい • 展望: AI に下準備をさせることで、教師の負担を減らせそう！ • 今後: 現場で 高 度な型付けが必要になったら、またこの 手 法使ってみる予定 まとめ
46. • Deep Readonly · type-challenges/type-challenges - GitHub • DeepReadonly<T> を教えるサンプルプログラム - TypeScript Playground • AI に TS の「型定義」→ JS の「下書き」変換をさせる - Gemini リンク集