TypeScript with React の勉強法について

Question

最近JSからTSに切り替えてReactを書いています。
基本的な型についてはわかるのですが、Reactの型や@typesが多用されているものだと理解するのに時間がかかってしまいます。これは実務レベルでのそのような型定義をやっていないからだと思います。

皆さんはどのようにして、TSの型について勉強されましたか？？？

Answer 1

私の時は、しばらく業務で分からず枕を濡らしながらしばらく使った後に何かしらのUdemy動画を1本みてフムフムしました。

今であれば、サバイバルTypeScriptあたりが無料にも関わらず内容がしっかりしていて良いかもしれません。書籍ならブルーベリー本がとても良いです。
どちらの資料もJavaScript自体への解説もなされています。実際、TypeScriptの理解はJavaScriptの下地がないと大変だと思うので、そこが不安な場合はTypeScriptと同時でも良いので置き去りにならないようにされると良いです。

そんな感じでまずはインプットで基礎を磨きます。
次のキーワードの7-8割くらいが、理解できていなくても朧げに脳内マッピングできていれば一旦OKです。

• Literal Types
• readonly, as const
• Template Literal Types
• any, never, unknown, as
• Narrowing
• Generics
• keyof, typeof
• Mapped Types
• Indexed Access Types
• Conditional Types
• Union Type, Intersection Type
• Utility Types
• infer
• Type Guard (type-predicates, type assertion function)

(特に大事な気がするワードを太字にしましたが、ちゃんと上記全て実務で使います。Conditional Typesは頻度低いですが...)

その後、以下のような問題集的なものに挑んでみましょう。コツは同じ問題でも理解するまで何回でも挑むことです。
https://qiita.com/uhyo/items/e4f54ef3b87afdd65546
https://github.com/type-challenges/type-challenges/blob/main/README.ja.md

多分、上記を真面目にやった後は実務で訓練していけば自然と実力が上がっていきます。
できれば集合論や関数型プログラミング、オブジェクト指向などの勉強が伴うと理解がより深まりますが...一応、実務だけでも厳密な型定義を徹底的に意識して、適宜調べながら進めれば十分力はつくと思います。

最初は大変かもですが、慣れてくるとTypeScript無しにはやってられなくなってくるので、是非頑張ってくださいませ