新区高科技助力打造抗风防水新机场

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 でした