(cache)TypeScript学習ロードマップ

TypeScript全然わかんない...
という状態から、プロジェクトに導入できるまでになんとかなったので、
学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。
私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです

Level 0: TypeScriptってなんぞや？

まず学習する前に、その対象がなんなのか、を見極める作業です。

TypeScriptは altJS の１つです。
JSは元々大規模なコードを組むには不向きな設計になっているので、
altJSというメタ言語でラッピングすることで扱いやすくするものです。
altJSで他に有名なのはcoffeeScriptなどでしょうか。

TypeScriptはtypeと名乗っている通り、静的型付けを特徴としています。
また、jsと互換性があり、jsの上位互換（スーパセット)です。

Level 1: 記述等の基礎学習

以下のような資料をまずはざっくりと読みます。
下記資料全て熟読する、というよりは、それぞれをつまみ食いして大まかに把握していくイメージです。

【おすすめ資料】
・TypeScriptチュートリアル① -環境構築編-
-> なにはともあれ環境構築!ですね。

・TypeScriptの型入門
-> qiitaの良記事です。かなり長いので途中で苦しくなってきたら、また後から読み直すのもいいかもしれません。(私もお世話になりました)

・サバイバルTypeScript
->網羅的な日本語でのts解説です。かなりわかりやすく導入も丁寧に感じました。

・TypeScript Deep Dive
-> 私はこれを中心に学習しました。意外と深い部分まで解説されているようです。ただ、元々英語の有志による翻訳なので、少しわかりづらい部分もありました。
訳に混乱したら他の資料を見、また戻って見直して...とすると理解が進みます。

Level2: TypeScript完全に理解した()

Level1までで全貌を掴んだところで、実際にどういう風に利用するのか？
という部分の理解の助けになります、みんな大好きオライリーの本です。

【おすすめ資料】
・プログラミングTypeScript ――スケールするJavaScriptアプリケーション開発
発行日も2020年3月13日と比較的新しく、deepでかつわかりやすい良書でした。
後半はかなり高度な解説もあり、一読しただけで全てを吸収できるレベルではなかったです
この先もなんども読み返すことになりそう、そんな本です。

Level3: TSXとの連携

実際にはReactやVue.jsなどと組み合わせて使う人も多いと思います。
私はReactを使うのでReactの資料中心になってしまいましたが、その他フレームワークでも解説サイトがたくさんあると思います。

【おすすめ資料】
・ReactのプロジェクトにTypeScriptを導入する〜npm installからコンパイルまで〜
-> なにはともあれ環境構（ry

・React公式チュートリアルをTypeScriptでやる
-> Reactの公式チュートリアルでお馴染みの三目並べゲームをTypeScriptに移行する方法を解説されています。
ざっくりとしたReactのJSからTSへの移行を理解することができます。

・typescript-cheatsheets/react
-> react/typescriptの実装をチートシートとしてまとめてくれています。
英語に抵抗がなければ実践的な実装の仕方がわかっていいのではないでしょうか。(実はまだ読んでいる途中です)

Level4: とにかくやってみることだ

ここまできたら実際にサンプルでもなんでもいいので組んでみたり、
既存のコードを移行してみるのが一番ですね。
TypeScriptに対応したパッケージなどであれば、公式サイトにtypeScriptという項目があったりしますので、それに目を通してみると色々為になります。

【おすすめ資料】
ここは実際には人それぞれですが、型定義ファイルををたくさん探しにいくことになるかと思います。

・npm @type探し
・styled-components typescript
・redux-toolkit advanced

Level5: 読める...読めるぞ!!

実際に一通り組めるようになったら人のコードをみて勉強するのがgoodですよね!
ブログなどで解説されている方やQiita記事、GitHubや公式のチュートリアルなんかも学習になります。

【おすすめ資料】
・仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう
-> 実際に簡単な仮想DOMフレームワークを実装して、仮想DOMについて考えるサイトです。
ちょっと長いですがすごく勉強になります。

・Apollo docs
-> GraphQLでお馴染みApolloの公式チュートリアルはTypeScriptで書かれています。

・vercel/next.js
-> Next.js公式のTypeScript記述のサンプルです。かなりシンプルに実装されています。

・今までの資料を読み返す

そして伝説へ...

参考資料

altJS(代替JavaScript言語)とは？選び方と注意点を徹底比較！