始めに
こんにちは！
まんじです！！
今回は「TypeScript難しくね？」と思ってるおそらくTypeScript入門してる人に向けての対策をご紹介します。
TypeScriptに苦戦する人は「型」のあたりがおそらく意味不明なのかなと思うので、そこらへんをメインに書きたいと思います！
結論から書いてしまうと、大体ここらへんで解決できます。
- TypeScript特有or頻出の分からない構文は落ち着いて調べてみる
- ジェネリクス（TとかPとか）は後回しにする
- 型がどうしても合わない場合はasを使う
- 型が難しすぎる場合はとりあえずanyで一旦逃げる
- 複雑な型は頭の中だけで考えずにVS Codeに書き出して確認する
- TypeScript入門時にざーっと読むとよいもの（対策というか紹介）
ぶっちゃけ最初はノリでany使いまくってればなんとかなる🙄
TypeScript特有or頻出の分からない構文は落ち着いて調べてみる
TypeScriptだとこういう文法が増えます。
const blogIds = req.params.blogIds ?? [];
const blogIdsNum = req.body?.blogIds ?? [];type IButton = {
onClick: () => void;
onBlur: () => Promise<void>;
headline?: string;
option: number | null
}といった感じで、undefinedをうまく扱う文法の ? ←クエッションマークみたいなのが増えるんですけど、これが入門の時に難しいように見えます。多分。
あとはkey valueのオブジェクトとかでしょうか。
const obj = {name: string, age: number, cry: () => void}string[]とかnumber[]とかのプリミティブ型と配列らへんの型は直感的に分かると思います。
それでこういったTypeScript特有の文法というか表現に関しては、とりあえず落ち着いて調べるのが良いと思います。
ChatGPTにつっこむのもいいですし、Googleに聞いてみるのも良いと思います。
聞く時は翻訳使って良いので英語のが将来的に楽です。
とりあえず分からない文法とか表現はChatGPTかGoogleに聞いてあげて、1個1個理解していくのが最初は大切です。
2~3ヶ月ぐらい書いていれば、徐々に調べる回数も減ってきますし、さらに書いていればそういった基本的なことは調べる必要がなくなります。
ジェネリクス（TとかPとか）は後回しにする
TypeScriptの型で難しいのがジェネリクスと言われる構文です。
型変数とも言われます。
function hello<T>(arg: T): T {
console.log(arg);
return arg;
}上の例ならargがTという型変数(numberでもstringでもnullでもなんでもOK)を許容します。
この例だとジェネリクスの意味はほぼないんですけど、ライブラリと絡んでジェネリクスと使う必要に迫られた時が一般的に「つらい」と言われる状態になってかなり複雑でスパゲッティコードになりがちです。
結構難しくて、特に型をextendsしたり条件分岐させると脳が終わるので、最初の頃は脳死で出現するジェネリクスだけを扱ってあげれば良いと思います。
Promise<string[]>とかuseState<string>みたいな<>の中身に入るのが一応ジェネリクスですけど、特に考えずとも直感的に使えます。
型がどうしても合わない場合はasを使う
ライブラリを使っていたり型が不明なものを扱う時(APIのparamsとかbodyとか)に型が合わないことが多々あります。
stringの肩を期待しているけれど、変な型のUnion3つとかがでてきちゃう場合とかです。（上の画像参照）
そういう時はとりあえずasで型を強制してあげるで良いカナーと思います。
ただ、type guardと言われる型のバリデーションを行う関数があるとより安全に型を扱えます。
すみません、ちょっと難しいかもしれないので、この話は頭の片隅に置いといてください。
なんにせよ、型が合わない時は脳死では微妙ですけど、問題なさそうならasでOK！
型が難しすぎる場合はとりあえずanyで一旦逃げる
TypeScript入門の頃は型が難しすぎる場合がたまにあります。
特にライブラリが絡んだ型は入門の頃は難しすぎる場合なケースが多いので、そう言う時にはanyを使いましょう。
基本的にanyはあんまり使わないほうがいいとされています。
というのも、any使っちゃうとTypeScriptの型の良さが消えるからです。
ただ、どうしても型が合わない時とかはあるし、特に入門の頃は型になれていないことも多いと思うのでそう言う時にanyを使うのはかなり有効な手段となります。
複雑な型は頭の中だけで考えずにVS Codeに書き出して確認する
上の画像のようにいわゆるネストしてる型とかのやや複雑な型は最初の頃は難しく感じます。
たまにいわゆる実務だと20~30個のフィールドがあってネストしていたりすることもあるので、そういう意味不明すぎる複雑な型とかはそいつを一旦別の場所に移動して1個1個ゆっくり見ていくのが便利です。
頭の中だけで処理すると脳が終わるので、なんというか書き出すことで、脳のメモリ消費量を抑えるみたいなイメージ。
TypeScript入門時にざーっと読むとよいもの
サバイバルTypeScript
サバイバルTypeScriptはぼくもTypeScriptに入門してた頃に移動中とかにざーっと読んでいた記憶があります。
正直全部は覚えられないですし覚えようとしたところで意味がないのでおすすめしませんが、TypeScriptの入門時にはすごく有益なリソースです。
ただ、実際に書く方がTypeScript力は伸びるので、書きつつたまに暇な時に読む程度に使うのが良いと思います。
ノートとかに書いちゃうのは微妙な勉強法です。とりあえず読んでおく程度でOK。
まとめ
いろいろ書いたんですけど、TypeScriptが難しいと感じるのは型の部分です。
もし普通にCallback関数とかPromiseが分からない場合にはJavaScriptの文法側の問題なのでそこは適宜調べつつって感じで良いと思います。
TypeScriptはJavaScriptから切り替えると最初すごく難しく感じがちですが、慣れてくるとTypeScriptのほうが型が補完されて圧倒的に楽になってきます。
あとは最近の実務？仕事？開発？だと、普通にJavaScriptじゃなくてTypeScriptを使うケースが99%ぐらいなので、なんにせよTypeScriptを頑張るといいかもしれません！
バックエンドもフロントエンドも書けるし！
TypeScript好きって人は多いですね！
