前置き

ご覧いただきありがとうございます。
Web制作会社で主にHTML・CSS・JavaScriptを書いているマークアップコーダーです。
いわゆるレガシーな環境で、未経験で入社しもう3年ほど従事していますが、
そろそろモダンなフロントエンド技術を身に着けたいと思い、
手探りに色々と勉強中です。
（JavaScript（Vanilla）も基礎が全然なのでまずはそこからですが、、）

今までいくつか書籍などで勉強しましたが、
読んで終わり、コードを写経して（ちょっとだけ変えたりして）終わりで、
「これだけでは良くないな〜」と思い、まずはざっくりですが学んだことや気になったことを記事にしようと思いました。

※注

基礎もまだまだの状況ですが、とりあえず「こんな感じなんだ〜」的なことを本当にざっくり書くだけです。
誰かのためになるわけでもわかりやすいわけでもない記事です。

TypeScriptってなんだ？

今回は「TypeScript」です。

知る前のイメージ

名前はめちゃくちゃ聞いたことがあり、
「JavaScriptの上位互換」「JavaScriptに型をつけたもの」とだけは知っていました。
「JavaScriptの変数とかに予め型指定しとくくらいかな〜」とも思っていました。

実態

上位互換過ぎる。
上位互換というかスーパーセットか。型を指定するだけでここまで安全性が担保されるか。
というか便利機能がすごいし、めちゃくちゃ注意してくれる。

機能と感想

エラー

まず機能どうこうというより、エラーがすごい。
筆者はVS Codeを使用していますが、少しでも適切でなければエディタ内ですぐにエラーが表示されることに驚きました（しかも日本語で！）。
Linterとかをあまり活用できていないので特に・・
実装するまでにエラーをなくしていかないといけない（というよりエラーが潰せる）ので、たしかにこれは安全性が非常に高まると思いました。

ただその分、TypeScriptはもちろんJavaScriptの知識が乏しい場合は、慣れたり覚えたりするまでは実装にかなり時間がかかるという印象もあります。
（とはいえそれは悪いことではなく良いことだとも思います。早く実装できても堅牢でなければ意味がない。）

型注釈・型推論

TypeScriptのメインの機能で、変数や関数に予め型を明示すること（型注釈）で、
その変数や関数ではその型以外の値が入るとエラーが起きます。
また型を指定せずとも、例えばある変数に値を代入した際に、代入された値から型を推測し、再代入の際は同じ型のみ可、という「型推論」という機能もあります。

これらの機能で、予期せぬ、想定外の値が入るのを未然に防げるので安全性が高まりますね。

また実装上の安全性のみでなく、
型注釈によって、開発者目線でも（コメントがなくても）コードの意図がわかりやすく、特に複数人での開発の効率が上がるというメリットもあります。
※一人での開発だとしても、過去の自分はもはや別の自分なのである意味「複数人開発」となりメリットがありますね。

型注釈で指定する型は、通常のstringやnamberの他に、
より限定的な「リテラル型」、
より柔軟性を上げるために、いくつかの型を許容する「ユニオン型」、
より堅牢にするために、複数の指定した型のみを許容する「インターセクション型」、
配列をより限定的に指定できる「タブル型」、
などがあります。
他にも「any」、「unknown」、関数の戻り値に指定する「void」、「never」があります。

型エイリアス

エイリアス、つまり他で使い回すようなイメージです。
同じ型注釈を色んな変数などで使いたい場合、毎回書くのは面倒でミスも起こるかもなので、
エイリアスを設定して、そのエイリアスを型として指定できます。
利便性がぐっと上がる、かつ見やすいコードが書けるようになる印象です。

インターフェイス

オブジェクトの型を予め定義し使い回せます。
型エイリアスと同様ですが、インターフェイスはオブジェクトに特化しており、メソッド（引数や戻り値）の型も定義できます。

インターフェイスはclassのように extends で継承（拡張）したり、定義したインターフェイスに後で構造を追加（マージ）したりもできます。こちらも利便性が上がるし、とにかく柔軟性がすごい。

型アサーション

特定の変数で、開発者側がTypeScriptの型推論より詳細な型情報を持っている場合、型を明示できる機能です。
個人的には、主にDOM操作で使用するイメージを持っています。
DOMで引っ張ってきた要素はTypeScriptではどの型に当てはまるか推論できないので、
より厳格にするために開発者側で型を明示する、ということが多いようです。

ジェネリクス

ややこしくなってきました、、
ざっくりいうと「型を抽象化して再利用する」機能で、その抽象的な型を「ジェネリック型」と呼びます。
（薬などの「ジェネリック」と由来は同じようです）

エイリアスやインターフェイスなど、型を使いまわしできる機能はありましたが、どちらも具体的に型を指定しており、使い回す場面は限定されていました（それでも柔軟性は十分にあります）。
ジェネリクスは、（日本語がおかしいですが）抽象的に型を定義することで、使い回す場面を限定せず色んな場所で使用できるという仕組みです。
これでもかというほど効率性を上げてきますね。

このあたりになると、プログラミングの知識が乏しい筆者にとっては「便利そうだけど使い方が難しい、、」と感じてしまっているので、色々試してみて掴んでいきたいと思います。

tsconfig.jsonによる設定

TypeScriptをJavaScriptにコンパイルする際に、tsconfig.jsonにJavaScriptのバージョンを指定しておくと、任意のバージョンにコンパイルできます。
プロジェクトによって流動的に変更できるので、オプション的な機能ですがかゆい所に手が届く印象です。
tsconfig.jsonには、他にもコンパイル先のディレクトリやモジュールシステムの指定など様々な設定が行えます。

まとめ

詰まるところ、主な機能はイメージ通り「JavaScriptに型をつけたもの」ではありますが、その機能のそもそもの安全性が高く、またより効率性と利便性を上げる機能がパッキングされた「すごい技術」であるな〜と感じました（語彙）。
まだまだ身に付いてはいませんが、そりゃフロントエンドでは必須と呼ばれるくらいだと思います。

今回はTypeScriptについてざっくり知りました。
ある程度どんなものかはわかったので、手を動かしてより深く身に付けていきたいと思います。
読んでいただきありがとうございました！