TypeScriptをこれから学ぶ人へ
開発環境
- typescript 4.7.4
前提
以下の方を対象にしています。
- 最近TypeScriptを書きはじめた
- これからTypeScriptを書きたい
- 型についての紹介やテクニック的なことは言及していません
本題
なんでTypeScriptを使うの？
「アサインされたプロジェクトで使われてたから」、「流行ってるから」などの理由で特に意識せずに使用している方も少なくはないのではないでしょうか？
TypeScriptがもたらしてくれる恩恵を意識するだけでも実装レベルで変わっていく（自分はそうでした）と思います！
結論
「あなたが不正をしようとしているとき、TypeScriptがテキストエディターの中でエラーメッセージを与えてくれる」
これに尽きると思います。
テストやコードレビューでの他者からの指摘を待つ必要はなく、自分の手元ですぐに気づくことができます。
例えば、JavaScriptで文字列に対してmapしようとします。
const str = 'hoge'
str.map((x) => x)
// 実行後
// TypeError: str.map is not a function当然エラーが出ますが、実行するまでは気付けません。
また、以下のように文字列に対して除算してみます。
const str = 'hoge'
const result = str / 2
console.log(result)
// 実行後
// NaNエラーは出ませんが、JavaScriptの場合できるだけ例外を避けようとします。
そのため意図していない値を扱うことになり、どこかでバグが発生する可能性が高くなります。
これらをTypeScriptで実装すると「実装時に」赤い波線で対象の箇所に警告を出してくれます。
const str = 'hoge';
str.map((x) => x);
// プロパティ 'map' は型 '"hoge"' に存在しません。ts(2339)
const str = 'hoge'
const result = str / 2
console.log(result)
// 算術演算の左辺には、'any' 型、'number' 型、'bigint' 型、または列挙型を指定する必要があります。ts(2362)上記はあくまで分かりやすい一例に過ぎませんが、実務ではコード量も多く、色々なデータを扱いながらUIを構築していくため、これらのエラーに「実行前」に気づけることで潜在的なバグにも気付けるたり、大きなメリットになります。
より多くのメリットを受けるために
- TypeScriptにできるだけ任せる
上記で紹介したケースでもそうですが、アノテーションはしていないにも関わらずstrが文字列であることを推測して警告を出してくれています。
TypeScriptは型推論がとても優秀です。
コード量も少なくできるので、できるだけTypeScriptに仕事をさせるのが良いです。
※アノテーションとは「値: 型」の形式で明示的に型を指定すること
- anyはできるだけ使わない
anyは「すべての」値の集まりであり、「何でも」できてしまいます。
要するにJavaScriptと同じ振る舞いをします。
TypeScriptを利用するメリットがなくなるので、実装上どうしても上手くいかない時以外は避けましょう。
どうやって学ぶ？
実践あるのみ、と言ってしまうとそれまでですが、個人的には以下の2つをお勧めします。
- 書籍を読んで体型的に理解する
個人的には始めにサラッとでも目を通して、後で必要なタイミングで見直すで良いと思います。
何もない状態で今の課題に向き合うよりも、よりどころになるものがあると結構救われます。
【電子書籍で読めるお勧め本】
- プログラミングTypeScript（https://www.oreilly.co.jp/books/9784873119045/）
- りあクト! TypeScript で始めるつらくない React 開発シリーズ（https://techbookfest.org/product/7FQY2BzfDGdsLMNdf7h1Mx?productVariantID=wCVwBWsuJa30n2A93X10MZ）
2に関してはReactにも焦点が当たっていますが、フロントエンド開発のこれまでの歴史や今のトレンドなど幅広いテーマを取り扱っているので、周辺の情報も欲しい！という人にはかなりおすすめです。
- type-challengesにチャレンジ！
こちらは応用編というか競プロな感じがしますが、1日1問ぐらいのペースでやってみると、使用するライブラリの型を見るのが楽になったり、型が身近に感じられる？ようになるので、勉強になっておすすめです。（自分も1日1問チャレンジ中ですが、難しい・・）
正直なところ、実務でどれだけ活かせるのかは自分次第だと思いますが、TypeScriptをより深く理解する上で欠かせない「ジェネリクス」「Conditional Types」などをふんだんに駆使しなければ解けない内容なので、余裕がある人はここで力を付ける！みたいな感覚でおすすめです。
さいごに
今まで静的型付け言語を触っていなかった人は特にそうだと思いますが、はじめはとっつきにくさを感じると思います。（自分もそうでした）
さいごに紹介したtype-challengesがまさしくそうですが、「習うより慣れろ」精神が理解を進めてくれると思うので、冒頭で紹介した何でTypeScriptを使うんだろうという原点を意識しつつ実務に活かせていただけると嬉しいです。