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