TypeScript は、JavaScript に型の情報を書き足せるようにした言語です。Microsoft が 2012年に公開しました。書いたものはそのままブラウザでは動かず、JavaScript に変換してから使います。

型とは「この値は文字列」「この関数は数値を返す」といった決まりごとです。書いた時点でそれに反していれば、実行する前にエディタ上で知らせてくれます。

何が防げるか

• 関数に渡す引数の数や種類の間違い
• 存在しないプロパティを読もうとする書き間違い
• 値が無いかもしれない変数を、無いまま使ってしまうこと
• APIの返す形が変わったときに、使っている箇所を取りこぼすこと

最後の点が実務では大きく効きます。サーバー側の返却に項目が増えたり名前が変わったりしたとき、画面側のどこを直すかを機械が教えてくれます。型が無いと、動かして気づくまで分かりません。

何は防げないか

型は、値の「形」を検査するだけです。計算の順番が違う、条件の分岐が抜けている、といった論理の誤りは見つかりません。外部から受け取るデータも、型を宣言しただけでは実際にその形である保証はありません。

型を付けたからテストが要らない、ということにはなりません。防げる間違いの種類が違います。

小さな案件でも入れるか

導入にかかるもの

1. ビルドの仕組みが必要になる（変換してから配置する）
2. 外部ライブラリの型定義を入れる手間がかかる
3. 最初に型を書く時間が増える

書く量は増えます。増えた分が、後の修正で返ってくるかどうかで判断することになります。1回作って終わりなら増えた分だけ損ですし、何度も触るなら早い段階で元が取れます。

ありがちな落とし穴

型の検査が通っても、画面が真っ白になることはあります。型を見ているのは変換の前の段階で、実行時の挙動までは見ていないためです。部品に渡す値の形だけ揃えて、受け取る側で取り出し忘れている、といった書き間違いは型だけでは止まりません。確認は必ず、変換したあとの実際の画面で行います。

ご相談について

当社では React・Next.js のコーディングを TypeScript で承っています。既存の JavaScript を段階的に移す形にも対応できますので、いま動いているものを止めずに進めたい場合はご相談ください。