もともとflowで型チェックをしていたReactのプロジェクトに、昨年の後半からTypeScriptが導入されました。
色々手こずりながら学んでますが、学んだ事をまとめていこうと思います。本編はまず入門編として知識のみを紹介します。実際のサンプルコードなどは基本編を読んでください。
そもそもTypeScriptとは？
TypeScriptはMicrosoftが開発・提供している型をつけられるJavaScriptです。JavaScriptでできることはTypeScriptでもできます。つまりJavaScriptのパワーアップバージョンです。
TypeScriptは静的型付け言語という種別にあたり、変数や定数、関数の引数や戻り値などに「どの型なのか」を指定することができます。
静的型付け言語とは？
静的型付け＝変数に格納出来る型を固定する事ができ、プログラムを実行前に型検査を行い、型の不整合による不具合の発生を予防することを可能にする。
例）TypeScript、C++、C＃、Java
動的型付け＝変数に格納出来る型を動的に変動するので、意図しない型に変換されて不具合が発生したりする事もあり、安全性という意味では静的型付け言語に劣る。
例）JavaScript、PHP、Ruby、Python
型とは？
ざっくり言うと、型はデータの種類の事です。以下Wikiから引用。
プログラミングにおけるデータ型は、値の種類を示し分類分けするラベルである。データタイプともいう。例えば 0, 1, -42 は「整数」型に、"foo", "Hello" は「文字列」型にラベルづけできる。
例）string, number, boolean, object, arrayなど
普通のプログラミング言語はこのデータ型にとても厳しいらしいのですが、JavaScriptは型がなく（Any型）ゆるゆるとか揶揄されていた。
TypeScriptはJavaScriptにコンパイルし、型の整合性がチェックされ、不整合の場合エラーが出る。これにより数値型だと思ったら文字列だったというようなトラブルや、異なる型で変数（値）を比較し実は"" == 0でtrueとなっていたというような、気づきにくいトラブルに時間を取られる事が防げます。品質を意識したプログラムを作成したい場合、型による制約（チェック）があるほうが安全なのです。
このコンパイルエラーを得れる事がTypeScriptの最大の恩恵と言われています。
以下、実践TypeScriptから引用：
昨今のJavaScriptプロジェクトは年々規模が増大しています。それに伴い、何かコードを変更するにしても影響範囲の特定が難しい。大規模プロジェクトが可能という観点は、まさにこの影響範囲を特定しやすいか否かに直結します。
静的型付けに守られる最大の利点は、１箇所のコード変更により引き起こされる影響範囲の特定です。TypeScriptの需要が年々増す理由はフロントエンドのコードが大規模化してる事に他ならないでしょう。
そんな現場にとってコンパイルエラーは進んで勝ち取りに行くものなのです。
なぜTypeScriptを使うのか？その恩恵とは？
コンパイルエラーを得れる事以外にもTSのメリットはたくさんあります。
- 同じMicroSoft製のVisual Studio Codeを使えば強力な入力補完が使えて楽。
- 関数にどんなデータを渡せばよいか、どんなデータが返ってくるかが一目でわかる
- Interface機能によりオブジェクト指向な設計ができ、大規模システムでもメンテナンスコストを下げることができる
- エラーチェックができる（誤った型のデータを渡したり、渡し忘れたりなど、
型の不整合を教えてくれるので、人力は気づきにくいミスに簡単に気づける）
以上、TypeScriptの基礎知識をまとめてみました。基本編に続く。