Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript 上達の道
Search
301 Moved Permanently
July 25, 2025
Technology
24
5.7k
TypeScript 上達の道
QiitaTechFesta 2025 (#QiitaTechFesta) の登壇資料です。
301 Moved Permanently
July 25, 2025
Tweet
Share
More Decks by 301 Moved Permanently
See All by 301 Moved Permanently
Kotlinで学ぶ 代数的データ型
ysknsid25
5
1.3k
Java で学ぶ 代数的データ型
ysknsid25
4
1.6k
Type Challengesに新しい問題を追加して Type ChallengesのMaintainerになった話
ysknsid25
3
910
統計データで2024年の クラウド・インフラ動向を眺める
ysknsid25
2
1.2k
GAS × Discord bot × Gemini で作ったさいきょーの情報収集ツール
ysknsid25
1
1.8k
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
8
3.8k
そうだ、神戸へ行こう
ysknsid25
2
17k
テストコードの品質を客観的な数値で担保しよう〜Mutation Testのすすめ〜
ysknsid25
12
5.6k
「ばん・さく・つき・たー!」にならないためにSHIROBAKOから 学んだこと
ysknsid25
4
1.6k
Other Decks in Technology
See All in Technology
CTFのためのKubernetes入門
kyohmizu
2
750
全てGoで作るP2P対戦ゲーム入門
ponyo877
3
920
High performance GIF playback/iOSDC25
noppefoxwolf
1
130
Breaking the Paywall to Build In-App Purchases Securely
sohsatoh
0
460
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
180
C# 14 / .NET 10 の新機能 (RC 1 時点)
nenonaninu
1
830
Goのビルドシステムの変遷 / The history of Go's build system
ymotongpoo
12
2.9k
DEFCON CHV CTF 2025 Write-up
bata_24
0
150
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
76k
Streamlit は社内ツールだけじゃない!PoC の速さで実現する'商用品質'の分析 SaaS アーキテクチャ
kdash
0
580
「非更新サブスクリプション」って何者?
haseken_dev
0
200
北海道の人に知ってもらいたいGISスポット / gis-spot-in-hokkaido-2025
sakaik
0
120
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
880
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
How to Think Like a Performance Engineer
csswizardry
27
2k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Thoughts on Productivity
jonyablonski
70
4.8k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Context Engineering - Making Every Token Count
addyosmani
3
120
Speed Design
sergeychernyshev
32
1.1k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
A designer walks into a library…
pauljervisheath
208
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
Kanon #QiitaTechFesta TypeScript 上達の道 ysknsid25 ysknsid25.bsky.social
⛳ このセッションのゴール ⛳ 2 僕が紹介した方法で TypeScript練習してみよう と思ってもらう
3 自己紹介 そういうお前はさぞお上手なんやろなぁ? Kanon • Type Challenges のメンテナ ◦ 一応全問解いた
◦ 型パズルの解きかたの本を書いたり • UnJSとかNitroとかにコントリビュートしてる
4 ★46.1k の TypeScriptの型パズル集 補足: Type Challengesとは
5 anyで定義された型を適切に定義する 補足: Type Challengesとは
6 Maintainer の仕事 補足: Type Challengesとは • 新しく作られた問題(PR)をマージする ◦ 自分自身も新しい問題を作る
• 過去の問題に対するテストケースの追加 • より学習効率が高くなるような機能の追加 • 利用しているライブラリのバージョンアップ対応など
7 TSKaigi 2025 の登壇資料を見てください👀 補足: Type Challengesのメンテナになるまでの話
8 ⚠ おことわり⚠ あくまで 僕の場合は です • 効果を保証するものではない ◦ ので
X とか はてブ コメントで攻撃とかやめてね。。。 • 練習方法のひとつとして持っておけるような話にはなると思う • 型に絞った話をする ◦ “TypeScript 上達への道” なので • TaPLとかで扱うような型検査の詳しい話とか、メンタルモデルがどうこうみたいな高 尚な話はしません
9 ⚠ おことわり⚠ sadnessOjisan さんのTSKaigi Kansaiでの 発表タイトルとかなーり似てるけどたまたまです... • 話したいことからタイトルつけ たらめっちゃ似てしまった...
• 内容は結構違う(と思う) • こちらもめっちゃいい話なので 是非資料見てほしい
10 前提の認識合わせ というわけで改めて最初にやりたいこと
11 上達の定義: わかる → できる になる 前提の認識合わせ1 書かれた型を読める TypeScriptの機能を使いこなして型を作れる
12 自分がどのレベルにいるか? 前提の認識合わせ
13 “型を使いこなす”の定義 前提の認識合わせ2 Lv. 5 Lv. 4 Lv. 3 Lv.
2 Lv. 1 基本的な型注釈がつけられる 型エイリアスやインターフェースを使って構造化され たデータ型が定義できる ユニオン型・リテラル型・列挙型の活用 ジェネリクスの活用 Conditional Types, Mapped Types, Index Access Type の活用
14 基本的な型注釈がつけられる Lv. 1 • numberとかstringとかbooleanとか基本型はつけられる • 関数の引数や戻り値に明確な型をつける
15 型エイリアスとインターフェースの活用 Lv. 2 • typeやinterfaceを使って構造化されたデータの型を定義し、再利用・変更に強い コードを書く
16 ユニオン型・リテラル型・列挙型の活用 Lv. 3 • 値の制限を型で行い、バグを防ぐ
17 ジェネリクスの活用 Lv. 4 • 型の再利用性と汎用性を保ちつつ、安全性も確保 • OSSのコード見てても、ここまで知っていればほとんど読めるのでは(?)
18 条件型・マッピング型・インデックス型の応用 Lv. 5 • Conditional Types, Mapped Types, Index
Access Types • infer, as, keyof, typeof • これらを組み合わせて複雑な構造 or 抽象的な型を作れる
19 レベルに合わせた学習をしていく
20 いきなりType Challengesは全然おすすめできない レベルに合わせた学習 • Type Challenges はレベル5まで できる 前提で問題が存在する
◦ 初心者がいきなりやると挫折する確率が高い ◦ 僕も挫折した • Type Challenges に取り組むまでにしておきたいことを以降はレベル別に紹介す る • まずはLv.1~5の全てに対して わかる 段階に持っていく
21 公式ドキュメントや書籍を読む Lv. 1 ~ 3 まで • 公式ドキュメント •
サバイバル TypeScript • うひょ さんのブルーベリー本 上二つも十分わかりやすく なにより無料
22 type-fest のコードを読んでみる Lv. 4 ~ 5 • TypeScriptのUtility Type集
• Type Challenges の冒頭でも紹介され ている • コメントに処理のイメージが書かれてた りするので、具体的なイメージも湧きや すくおすすめ
23 Merge type-fest サンプル1 • Destination, Source はジェネリクス • Simplifyってなにするの?
• SimpleMergeって何するの? • PickIndexSignatureって何するの? この辺を追っていくことで Conditional Typesとか もろもろ使い方を覚えられる 知らないものが出てきたら 公式ドキュメントへ戻る これを繰り返す
24 Type Challenges に取り組む Lv. 1 ~ 5 までを使いこなす •
全部解く必要はないと思う ◦ hardからは型システムで計算とかし始める ◦ 「すごいけど実戦でいつ使うんそれ」な問題が大半 ◦ mediumまでを3周くらいすれば実戦でも勝手に手が動くようになる ◦ その頃にはOSSライブラリの型定義とかも難なく「読める、読めるぞぉ」となる(と思う)
25 上級までに困ったら Lv. 1 ~ 5 までを使いこなす
26 上級までに困ったら Lv. 1 ~ 5 までを使いこなす
27 Pick 例題
28 Pick 解答例 例題
29 Run-length encoding 上級になると
30 Run-length encoding 解答例 上級になると
31 Kanon流 TypeScript 上達への道 まとめ • 自分のレベルを把握する • レベルに応じたトレーニングをする ◦
ドキュメントなどを読む ◦ type-fest などの既存のUtility ライブラリを読む ◦ Type Challengesに取り組む • 知らない概念が出てきたら、戻る • とにかくやる
Happy Hacking !! 水瀬いのり さんが推し の @ysknsid25 @ysknsid25.bsky.social Presented by
Kanon でした