TypeScriptを少しわかり始めたので学習方法をまとめてみた

TypeScriptを勉強していると「ん？」となることがよくあります…。
今では少し慣れてきましたが、学び始めたころはよく意味が分からず悪戦苦闘しておりました…。

:::note
TypeScriptを理解する上でやってきたことを紹介して少しでも助けになればと考えてまとめました。
:::

## なぜTypeScriptが難しいと感じるのか？
誰に聞いたわけでもなく主観ですが、TypeScriptが難しく感じる理由を考えてみました。

### バックグラウンドが影響する
私のようにHTMLやCSS、JavaScriptのようにコーディング方面からTypeScriptの言語に入門すると悪戦苦闘することになるのではないかと思います…。

:::note alert
これまで扱ってきた言語の仕様が厳格なものではないため「型」について全く意識できてなかったことが原因だと思っています…。
:::

### 突如として登場する「T]や「U」が混乱を招く
定義の中に出現する「T」や「U」などが初学者にとっては理解を妨げる原因になっていると思います。（**私は少なくともそうでした…**）

:::note alert
HTMLやCSS、JavaScriptを主戦場にしていた人にとってあまり見慣れない書き方だからだと思っています。
:::

### 型の定義方法がたくさんある…
`string`や`number`のならまだわかります。
`ComponentProps`や`ComponentPropsWithoutref`に加えて、
`Omit`や`Pick`などのユーティリティ型など様々な定義方法があります…。

:::note alert
さらにややこしいのは、アップデートにより現在のバージョンでは非推奨とされる書き方があることです…。
初学者にはそれらを正しく選び取ることは困難だと思っています…。
:::

## 【本題】じゃあ、TypeScriptをどう学べばいいのか？
「TypeScriptを勉強したいです！何をすればいいですか？」と質問をすると**100％にちかいの確率で「Type-Challenges」をやるのはどうですか？と返ってくる**と思います。

:::note alert
私にとっては難しくて、理解を深めるどころではありませんでした…。
:::

理解できなかったの理由は…
- TypeScriptの仕様をあまりに知らなかった
- 解説に出てくる単語が理解できない

:::note warn
英語であることで翻訳した時に読みづらいことは否めませんが、それ以前に説明で使われている言葉やなんでそうなるのかなどの言語仕様への理解が全く足りてませんでした…。
:::

ここからは学習方法について伝えます！

### TypeScriptについて理解をすすめる！
この辺りを覚えると記事を読んだり、Type-Challengesの解説を理解できたりするので100％ではなくても50〜60％程度把握することに努めます！

私はTypeScriptの仕様を理解するために2つのことをしました！
- [サバイバルTypeScript](https://typescriptbook.jp/)を読了する
- [TypeScriptについて動画](https://www.udemy.com/share/102EQg3@lujMJ59BkIzOO8zKDV4zVFxeYfJoBpGxt3jGgthTQ4QG8F4aVTLyuahPUeVWWbJ4/)で理解をすすめる

:::note
ドットインストールなどの学習サイトで学習するのも良いと思います！
自分にあった方法を見つけて知識を身につけてください！
:::

はっきり言って1度で全てを理解するのは難しいですし、確実に忘れます…。
個人的にポイントをピックアップしました！
最低限ここを理解しておく！のリストを作成しましたので参考にしてください！

- [ジェネリクス](https://typescriptbook.jp/reference/generics)
- [ユーティリティ型](https://typescriptbook.jp/reference/type-reuse/utility-types)
- [ユニオン型](https://typescriptbook.jp/reference/type-reuse/union-distribution)
- [keyof](https://typescriptbook.jp/reference/type-reuse/keyof-type-operator)
- [typeof](https://typescriptbook.jp/reference/type-reuse/typeof-type-operator)
- [Conditional Types](https://typescriptbook.jp/reference/type-reuse/conditional-types)
- [Mapped Types](https://typescriptbook.jp/reference/type-reuse/mapped-types)
- [インデックスアクセス型](https://typescriptbook.jp/reference/type-reuse/indexed-access-types)

:::note
ユーティリティ型はたくさん種類があるので、`Pick`や`Omit`を優先しその他は少しずつ覚えても良いかもしれません！

また、はじめはどうやって使うの？ってものが多いと思うので一旦そんなものがあるということを知っておくだけでOKだと思います！
:::

### ちょっと理解できたと思ったらテストと実践を繰り返す

- テストとは**Type-Challengesにチャレンジする**こと
- 実践とは**コンポーネントを作成する**こと

を指します。

先ほど例に挙げた点を理解できるようになると「Type-Challenges」の問題がなんとなくわかるようになっていると思います！

:::note
「概念を理解する」「実際に使う」の2点間を行き来しながら理解を進めていきます！
:::

Type-Challengesは、[github](https://github.com/type-challenges/type-challenges/blob/main/README.ja.md)で提供されているものもありますが、学習サービスもあるので初学者の方にはそちらの方がとっつきやすいのでオススメです！

https://mosya.dev/type-challenges

## 【まとめ】TypeScript学習方法
まず知識を身につけるステップを踏むのがセオリーだと思います。
私の場合は下記のように進めました。

1. 「[サバイバルTypeScript](https://typescriptbook.jp/)」を読んで知識が0の状態から1の状態する

1. [動画](https://www.udemy.com/share/102EQg3@lujMJ59BkIzOO8zKDV4zVFxeYfJoBpGxt3jGgthTQ4QG8F4aVTLyuahPUeVWWbJ4/)を全て見て網羅性を高める
1. 実際にコンポーネントを作ってみる
1. [Type-Challenges](https://mosya.dev/type-challenges)にトライしてみる

上記をループさせて知識を深めてきました。

:::note
まだまだ、知識不足を感じますが1度目は理解できなかったものが実際にコンポーネントを作ってもう一度リファレンスを読んだ時に理解できることもあるので繰り返すことは大切だと感じました。
:::

これからTypeScriptの学習をすすめる予定の方、今学習を進めている方の参考になれば幸いです！