TypeScript 上達の道

QiitaTechFesta 2025 (#QiitaTechFesta) の登壇資料です。

Transcript

1. Kanon #QiitaTechFesta TypeScript 上達の道 ysknsid25 ysknsid25.bsky.social
2. ⛳ このセッションのゴール ⛳ 2 僕が紹介した方法で TypeScript練習してみよう と思ってもらう
3. 3 自己紹介 そういうお前はさぞお上手なんやろなぁ？ Kanon • Type Challenges のメンテナ ◦ 一応全問解いた ◦ 型パズルの解きかたの本を書いたり • UnJSとかNitroとかにコントリビュートしてる
4. 4 ★46.1k の TypeScriptの型パズル集 補足: Type Challengesとは
5. 5 anyで定義された型を適切に定義する 補足: Type Challengesとは
6. 6 Maintainer の仕事 補足: Type Challengesとは • 新しく作られた問題(PR)をマージする ◦ 自分自身も新しい問題を作る • 過去の問題に対するテストケースの追加 • より学習効率が高くなるような機能の追加 • 利用しているライブラリのバージョンアップ対応など
7. 7 TSKaigi 2025 の登壇資料を見てください👀 補足: Type Challengesのメンテナになるまでの話
8. 8 ⚠ おことわり⚠ あくまで 僕の場合は です • 効果を保証するものではない ◦ ので X とか はてブ コメントで攻撃とかやめてね。。。 • 練習方法のひとつとして持っておけるような話にはなると思う • 型に絞った話をする ◦ “TypeScript 上達への道” なので • TaPLとかで扱うような型検査の詳しい話とか、メンタルモデルがどうこうみたいな高 尚な話はしません
9. 9 ⚠ おことわり⚠ sadnessOjisan さんのTSKaigi Kansaiでの 発表タイトルとかなーり似てるけどたまたまです... • 話したいことからタイトルつけ たらめっちゃ似てしまった... • 内容は結構違う(と思う) • こちらもめっちゃいい話なので 是非資料見てほしい
10. 10 前提の認識合わせ というわけで改めて最初にやりたいこと
11. 11 上達の定義: わかる → できる になる 前提の認識合わせ1 書かれた型を読める TypeScriptの機能を使いこなして型を作れる
12. 12 自分がどのレベルにいるか？ 前提の認識合わせ
13. 13 “型を使いこなす”の定義 前提の認識合わせ2 Lv. 5 Lv. 4 Lv. 3 Lv. 2 Lv. 1 基本的な型注釈がつけられる 型エイリアスやインターフェースを使って構造化され たデータ型が定義できる ユニオン型・リテラル型・列挙型の活用 ジェネリクスの活用 Conditional Types, Mapped Types, Index Access Type の活用
14. 14 基本的な型注釈がつけられる Lv. 1 • numberとかstringとかbooleanとか基本型はつけられる • 関数の引数や戻り値に明確な型をつける
15. 15 型エイリアスとインターフェースの活用 Lv. 2 • typeやinterfaceを使って構造化されたデータの型を定義し、再利用・変更に強い コードを書く
16. 16 ユニオン型・リテラル型・列挙型の活用 Lv. 3 • 値の制限を型で行い、バグを防ぐ
17. 17 ジェネリクスの活用 Lv. 4 • 型の再利用性と汎用性を保ちつつ、安全性も確保 • OSSのコード見てても、ここまで知っていればほとんど読めるのでは(？)
18. 18 条件型・マッピング型・インデックス型の応用 Lv. 5 • Conditional Types, Mapped Types, Index Access Types • infer, as, keyof, typeof • これらを組み合わせて複雑な構造 or 抽象的な型を作れる
19. 19 レベルに合わせた学習をしていく
20. 20 いきなりType Challengesは全然おすすめできない レベルに合わせた学習 • Type Challenges はレベル5まで できる 前提で問題が存在する ◦ 初心者がいきなりやると挫折する確率が高い ◦ 僕も挫折した • Type Challenges に取り組むまでにしておきたいことを以降はレベル別に紹介す る • まずはLv.1~5の全てに対して わかる 段階に持っていく
21. 21 公式ドキュメントや書籍を読む Lv. 1 ~ 3 まで • 公式ドキュメント • サバイバル TypeScript • うひょ さんのブルーベリー本 上二つも十分わかりやすく なにより無料
22. 22 type-fest のコードを読んでみる Lv. 4 ~ 5 • TypeScriptのUtility Type集 • Type Challenges の冒頭でも紹介され ている • コメントに処理のイメージが書かれてた りするので、具体的なイメージも湧きや すくおすすめ
23. 23 Merge type-fest サンプル1 • Destination, Source はジェネリクス • Simplifyってなにするの？ • SimpleMergeって何するの？ • PickIndexSignatureって何するの？ この辺を追っていくことで Conditional Typesとか もろもろ使い方を覚えられる 知らないものが出てきたら 公式ドキュメントへ戻る これを繰り返す
24. 24 Type Challenges に取り組む Lv. 1 ~ 5 までを使いこなす • 全部解く必要はないと思う ◦ hardからは型システムで計算とかし始める ◦ 「すごいけど実戦でいつ使うんそれ」な問題が大半 ◦ mediumまでを3周くらいすれば実戦でも勝手に手が動くようになる ◦ その頃にはOSSライブラリの型定義とかも難なく「読める、読めるぞぉ」となる(と思う)
25. 25 上級までに困ったら Lv. 1 ~ 5 までを使いこなす
26. 26 上級までに困ったら Lv. 1 ~ 5 までを使いこなす
27. 27 Pick 例題
28. 28 Pick 解答例 例題
29. 29 Run-length encoding 上級になると
30. 30 Run-length encoding 解答例 上級になると
31. 31 Kanon流 TypeScript 上達への道 まとめ • 自分のレベルを把握する • レベルに応じたトレーニングをする ◦ ドキュメントなどを読む ◦ type-fest などの既存のUtility ライブラリを読む ◦ Type Challengesに取り組む • 知らない概念が出てきたら、戻る • とにかくやる
32. Happy Hacking !! 水瀬いのり さんが推し の @ysknsid25 @ysknsid25.bsky.social Presented by Kanon でした