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
23
5.3k
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.2k
Java で学ぶ 代数的データ型
ysknsid25
3
1.6k
Type Challengesに新しい問題を追加して Type ChallengesのMaintainerになった話
ysknsid25
3
850
統計データで2024年の クラウド・インフラ動向を眺める
ysknsid25
2
1.2k
GAS × Discord bot × Gemini で作ったさいきょーの情報収集ツール
ysknsid25
1
1.7k
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
8
3.8k
そうだ、神戸へ行こう
ysknsid25
2
17k
テストコードの品質を客観的な数値で担保しよう〜Mutation Testのすすめ〜
ysknsid25
12
5.5k
「ばん・さく・つき・たー!」にならないためにSHIROBAKOから 学んだこと
ysknsid25
4
1.5k
Other Decks in Technology
See All in Technology
ZOZOTOWNの大規模マーケティングメール配信を支えるアーキテクチャ
zozotech
PRO
0
290
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
22
5.2k
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
kentapapa
0
3.5k
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
810
OPENLOGI Company Profile for engineer
hr01
1
38k
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
220
Oracle Cloud Infrastructure:2025年7月度サービス・アップデート
oracle4engineer
PRO
1
190
GMOペパボのデータ基盤とデータ活用の現在地 / Current State of GMO Pepabo's Data Infrastructure and Data Utilization
zaimy
3
220
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
220
Infrastructure as Prompt実装記 〜Bedrock AgentCoreで作る自然言語インフラエージェント〜
yusukeshimizu
1
110
AI時代の大規模データ活用とセキュリティ戦略
ken5scal
0
100
Serverless Meetup #21
yoshidashingo
1
120
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Git: the NoSQL Database
bkeepers
PRO
431
65k
A better future with KSS
kneath
239
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
BBQ
matthewcrist
89
9.8k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Thoughts on Productivity
jonyablonski
69
4.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
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 でした