TypeScriptの"型"を学びたいあなたへ。type-challengesのすゝめ

先日以下ツイートをしたら思いの外良い反応もらえたので、より詳細な紹介記事を書いてみました。

<blockquote class="twitter-tweet" width="400"><p lang="ja" dir="ltr">これは必見だわ!!<br><br>TypeScriptの型についての問題集<br>想定に従って独自のユーティリティ型を作っていく感じの問題がレベル別に提供されてる<br><br>Playgroundのリンクから手を動かしながらチャレンジできるので凄くやりやすい<br><br>（自分はeasyの問題でも分からんのあった。頑張ろ😅）<a href="https://t.co/tkEFe7VrBQ">https://t.co/tkEFe7VrBQ</a></p>&mdash; Kawamata Ryo (@KawamataRyo) <a href="https://twitter.com/KawamataRyo/status/1301666282715181057?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# type-challengesとは
[type-challenges/type-challenges: Collection of TypeScript type challenges with online judge](https://github.com/type-challenges/type-challenges)
<a href="https://github.com/type-challenges/type-challenges" target="_blank"><img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/6fcd5c37-5735-5ed2-6b78-3e44160709a3.png"></a>

[VueUse](https://github.com/antfu/vueuse)や[VueDemi](https://github.com/antfu/vue-demi)の開発者である [@antfu7](https://twitter.com/antfu7)さんが開発している、TypeScriptの型問題に気軽に挑戦できるリポジトリです。

- ある型上の問題に対処するために、独自のユーティリティタイプを作成する型パズルを提供
- TypeScript Playgroundで実際に手を動かしながら学べる
- 世界のプログラマーの回答が確認できる

という点が特徴です。



# 使い方

## 1. READMEから挑戦したい問題を選ぶ

https://github.com/type-challenges/type-challenges にアクセスして、READMEのChallengesから挑戦したい問題を選びます。
レベル別に掲載されているので、まず黄緑ラベルのeasyから順に解いてみるのがおすすめです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/071809e6-8b1f-6dfc-743a-c9ab80e1ccfb.png" width="800">

バッジをクリックすると、問題詳細ファイルに遷移します。
ここが問題挑戦や、回答の起点になります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/d0a17afd-6388-f909-d7a7-a82fe7dce4ec.png" width="800">

## 2. TypeScript Playgroundで問題にチャレンジ

Take the Challengeのバッジを押してTypeScript Playgroundにアクセスします。
<img src="https://img.shields.io/badge/-Take%20the%20Challenge-3178c6?logo=typescript" alt="Take the Challenge"/>
TypeScript Playgroundでは問題文と回答欄、テストケースが記載されてます。テストケースではtype-challengesから型チェック用のユーティリティタイプがimportされています。JestのAssertionのような形で、ジェネリクスにユーティリティタイプを入れることで型を検証しています（すごい..!!）。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/f510c034-d630-028b-1a1e-1bd18cc4eb29.png" width="1000">

テストケースで型エラーが発生しないように、`Your Code Here`の部分の型を修正してみてください。


## 3. 回答を確認 or  回答をIssueとして提出
Playgroundで問題に挑戦して型エラーを解決できたら、check out Solutionsのバッジから、対象の問題に対する回答（Issue）を確認してみましょう。
もし同様の回答が見つかったら投票やコメントをしてみてください。
<img src="https://img.shields.io/badge/-Check%20out%20Solutions-de5a77?logo=awesome-lists&logoColor=white" alt="Check out Solutions"/> 
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/d1a02b23-eee3-563f-80f1-7bd0cfbc793b.png" width="800">

また、もし自分の回答がユニークなものだったら、Share your solutionsのバッジからIssueを作成して回答をシェアしてみましょう。
<img src="https://img.shields.io/badge/-Share%20your%20Solutions-teal" alt="Share your Solutions"/>
バッジを押すと回答用のIssueが開かれるので、`your answers`の部分に自分の回答を貼り付け、Submit new issueボタンを押せば完了です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/512648a2-9514-0c76-8c32-0b1308fb9157.png" width="800">

# Appendix: おすすめのTypeScript学習資料
「いやいや、型パズルをやる前にそもそもこれからTypeScript学ぶんだわ..」という方に向けておすすめ資料を紹介します。

## TypeScript 公式ドキュメント
最近リニューアルされたTypeScript公式ドキュメントです。Handbookという章がとても分かりやすいです。
Handbookには基礎的な内容。Handbook Referenceにはconditional typesなど応用的な内容が掲載されています。

- [TypeScript: Handbook - The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)

ちなみにこちらのIssueで日本語への翻訳プロジェクトも動いています。
コントリビューションしてみるのも良いと思います。

[Japanese Translation Coordination Issue · Issue #220 · microsoft/TypeScript-Website](https://github.com/microsoft/TypeScript-Website/issues/220)

## TypeScript Deep Dive
言わずと知れたTypeScriptの入門書ですね。TypeScriptを学びたいという方に「何から読めば？」と聞かれたら、まずこちらを進めることが多いです。
JavaScriptの歴史からTypeScriptへの移り変わり、TypeScriptのトランスパイル過程、高度な型機能まで幅広く解説されています。

[TypeScriptの型システム - TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/type-system)

## @uhyo さんの記事
私は@uhyoさんの記事でTypeScriptを学びました。
どの記事もとても良いのですが、最初は以下記事で概要を理解するのがおすすめです。

- [TypeScriptの型入門 - Qiita](https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a)
- [TypeScriptの型初級 - Qiita](https://qiita.com/uhyo/items/da21e2b3c10c8a03952f)

そしてこちらの演習で理解度を確認するのが良いと思います。

- [TypeScriptの型演習 - Qiita](https://qiita.com/uhyo/items/e4f54ef3b87afdd65546)
- [TypeScriptの型演習（解答・解説編） - Qiita](https://qiita.com/uhyo/items/0e7821ce494024c98da5)

## O'Reilly プログラミングTypeScript
より体系的にTypeScriptを学ぶならO'Reillyから出ている書籍も良いです。
TypeScriptの型システムが網羅的に解説されています。

[O'Reilly Japan - プログラミングTypeScript](https://www.oreilly.co.jp/books/9784873119045/)

# 終わりに

以上「TypeScriptの"型"を学びたいあなたへ。type-challengesのすゝめ」でした。
「TypeScriptの型は完全に理解してる!」「全く自信がない!」どちらの人にもおすすめなので、是非挑戦してみください。

（こんな記事を書いておきながらeasyレベルの[Tuple to Object](https://github.com/type-challenges/type-challenges/blob/master/questions/11-easy-tuple-to-object/README.md)でつまづいた私も鍛錬あるのみです🙈）


**2020/09/06 追記**
な、なんと!!type-challengesの作者の[@antfu7](https://twitter.com/antfu7)さんがコメント付きRTしてくれました（しかも完璧な日本語で）。嬉しい!!😆


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ご紹介ありがとうございます!! <br><br>TSの学習過程でさまざまな問題に遭遇したので、この問題セットを作成しました。 お役に立ててうれしいです。😆 <a href="https://t.co/RNa50HEQxq">https://t.co/RNa50HEQxq</a></p>&mdash; Anthony Fu (@antfu7) <a href="https://twitter.com/antfu7/status/1302320797348818944?ref_src=twsrc%5Etfw">September 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>