先日以下ツイートをしたら思いの外良い反応もらえたので、より詳細な紹介記事を書いてみました。
これは必見だわ!!
— Kawamata Ryo (@KawamataRyo) September 3, 2020
TypeScriptの型についての問題集
想定に従って独自のユーティリティ型を作っていく感じの問題がレベル別に提供されてる
Playgroundのリンクから手を動かしながらチャレンジできるので凄くやりやすい
（自分はeasyの問題でも分からんのあった。頑張ろ😅）https://t.co/tkEFe7VrBQ
type-challengesとは
type-challenges/type-challenges: Collection of TypeScript type challenges with online judge
VueUseやVueDemiの開発者である @antfu7さんが開発している、TypeScriptの型問題に気軽に挑戦できるリポジトリです。
- ある型上の問題に対処するために、独自のユーティリティタイプを作成する型パズルを提供
- TypeScript Playgroundで実際に手を動かしながら学べる
- 世界のプログラマーの回答が確認できる
という点が特徴です。
使い方
1. READMEから挑戦したい問題を選ぶ
https://github.com/type-challenges/type-challenges にアクセスして、READMEのChallengesから挑戦したい問題を選びます。
レベル別に掲載されているので、まず黄緑ラベルのeasyから順に解いてみるのがおすすめです。
バッジをクリックすると、問題詳細ファイルに遷移します。
ここが問題挑戦や、回答の起点になります。
2. TypeScript Playgroundで問題にチャレンジ
Take the Challengeのバッジを押してTypeScript Playgroundにアクセスします。
TypeScript Playgroundでは問題文と回答欄、テストケースが記載されてます。テストケースではtype-challengesから型チェック用のユーティリティタイプがimportされています。JestのAssertionのような形で、ジェネリクスにユーティリティタイプを入れることで型を検証しています（すごい..!!）。
テストケースで型エラーが発生しないように、Your Code Hereの部分の型を修正してみてください。
3. 回答を確認 or 回答をIssueとして提出
Playgroundで問題に挑戦して型エラーを解決できたら、check out Solutionsのバッジから、対象の問題に対する回答（Issue）を確認してみましょう。
もし同様の回答が見つかったら投票やコメントをしてみてください。
また、もし自分の回答がユニークなものだったら、Share your solutionsのバッジからIssueを作成して回答をシェアしてみましょう。
バッジを押すと回答用のIssueが開かれるので、your answersの部分に自分の回答を貼り付け、Submit new issueボタンを押せば完了です。
Appendix: おすすめのTypeScript学習資料
「いやいや、型パズルをやる前にそもそもこれからTypeScript学ぶんだわ..」という方に向けておすすめ資料を紹介します。
TypeScript 公式ドキュメント
最近リニューアルされたTypeScript公式ドキュメントです。Handbookという章がとても分かりやすいです。
Handbookには基礎的な内容。Handbook Referenceにはconditional typesなど応用的な内容が掲載されています。
ちなみにこちらのIssueで日本語への翻訳プロジェクトも動いています。
コントリビューションしてみるのも良いと思います。
Japanese Translation Coordination Issue · Issue #220 · microsoft/TypeScript-Website
TypeScript Deep Dive
言わずと知れたTypeScriptの入門書ですね。TypeScriptを学びたいという方に「何から読めば？」と聞かれたら、まずこちらを進めることが多いです。
JavaScriptの歴史からTypeScriptへの移り変わり、TypeScriptのトランスパイル過程、高度な型機能まで幅広く解説されています。
TypeScriptの型システム - TypeScript Deep Dive 日本語版
@uhyo さんの記事
私は@uhyoさんの記事でTypeScriptを学びました。
どの記事もとても良いのですが、最初は以下記事で概要を理解するのがおすすめです。
そしてこちらの演習で理解度を確認するのが良いと思います。
O'Reilly プログラミングTypeScript
より体系的にTypeScriptを学ぶならO'Reillyから出ている書籍も良いです。
TypeScriptの型システムが網羅的に解説されています。
O'Reilly Japan - プログラミングTypeScript
終わりに
以上「TypeScriptの"型"を学びたいあなたへ。type-challengesのすゝめ」でした。
「TypeScriptの型は完全に理解してる!」「全く自信がない!」どちらの人にもおすすめなので、是非挑戦してみください。
（こんな記事を書いておきながらeasyレベルのTuple to Objectでつまづいた私も鍛錬あるのみです🙈）
2020/09/06 追記
な、なんと!!type-challengesの作者の@antfu7さんがコメント付きRTしてくれました（しかも完璧な日本語で）。嬉しい!!😆
ご紹介ありがとうございます!!
— Anthony Fu (@antfu7) September 5, 2020
TSの学習過程でさまざまな問題に遭遇したので、この問題セットを作成しました。 お役に立ててうれしいです。😆 https://t.co/RNa50HEQxq