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

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

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

なぜTypeScriptが難しいと感じるのか？

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

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

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

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

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

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

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

「TypeScriptを勉強したいです！何をすればいいですか？」と質問をすると100％にちかいの確率で「Type-Challenges」をやるのはどうですか？と返ってくると思います。

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

理解できなかったの理由は…

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

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

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

私はTypeScriptの仕様を理解するために2つのことをしました！

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

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

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

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

を指します。

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

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

Type-Challengesは、githubで提供されているものもありますが、学習サービスもあるので初学者の方にはそちらの方がとっつきやすいのでオススメです！

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

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

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

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