JavaScript のエラーに困っているなら TypeScript を試してみよう

TypeScript とは、ひとことで言うと型がある JavaScript のことだ。別の言い方をすると静的型付け言語だ。

TypeScript を有効に使うことで JavaScript のエラーを格段に減らすことができる。この記事では、そのようなメリットを中心に紹介する。

なぜ型が必要なのか

もしあなたが今まで JavaScript のような動的型付け言語のみを扱ってきたなら「なぜ型が必要なのか」と思われるかもしれない。シンプルに書ける動的型付け言語は使いやすく、非常に強力だ。あえて JavaScript よりコード量が多い TypeScript を選ぶ理由はどこにあるのだろうか。

型があることの利点はいくつもあるが、私が特に重視しているのは2点だ。

  1. 実行前にコンパイルエラーを発見できる(気付きにくいランタイムエラーを減らせる)
  2. 他のコーダー・レビュアーに優しい(コードの意図を読みやすい)

1 について。 JavaScript は実際にコードを実行しないとエラーを発見できないが、 TypeScript はエラーの多くを実行前に検出できる。厳密にテストを書けばカバーできることもあるが、手がかからないに越したことはない。

2 について。あなたは他人が書いた関数の戻り値がどのようなオブジェクトか分からず、コードを辿ってみたことはないだろうか。 TypeScript なら型が明記されているので一目瞭然だ。引数についても、どのようなものが求められているかがわかるので、トライアンドエラーの回数も減るだろう。

さらに、 IDE を使っていればオブジェクトのプロパティやメソッドを自動で補完してくれるのでスピーディにコーディングでき、ミスも減らせるなどいいことずくめだ。

試してみよう

簡単な例で TypeScript がどのように働くか試してみよう。 TS Playground という手軽に TypeScript を手軽に試せるサービスを使ってみる。

これは JavaScript で配列の平均値を計算するだけのコードだ。数値を想定しているため、文字列が混じると予期しない結果になってしまう。

const average = (values) => {
    return values.reduce((a, b) => a + b) / values.length;
};

console.log(average([1, 2, 3])); // 2
console.log(average(["1", 2, 3])); // 41

TypeScript で書き直してみよう。引数と戻り値の型を追加しただけだ。

const average = (values: Array<number>): number => {
    return values.reduce((a, b) => a + b) / values.length;
};

console.log(average([1, 2, 3])); // 2
console.log(average(["1", 2, 3])); // 41
Type 'string' is not assignable to type 'number'.

これをコンパイルするとするとちゃんとエラーになってくれる。 IDE を使っていれば “1” の部分にエラーが表示されるはずだ。

導入するには

最近のフレームワークの多くは TypeScript の導入ガイドがある。 React , Vue が代表的だ。もしあなたがこれらのフレームワークに興味があるならそこから始めてみるのが最良の選択肢だろう。

もちろん、これらのフレームワークを使わなくても TypeScript を始めることはできる。 TypeScript for JavaScript Programmers あたりがおすすめだ。

TypeScript のこれから

以下に興味深いグラフがある。 JavaScript の関連技術の人気を可視化したものだ。上にいくほど多くのユーザーに使われていて、右にいくほどユーザーに愛されている。軌跡は2016年から2019年の間でどのように変化したかを表している。

出典: https://2019.stateofjs.com/overview/#toolsArrow

TypeScript は右上の青い点だ。見てわかるとおり、 TypeScript はここ数年で急激に人気を獲得している。似たような動きをしているものだと、 Jest というテストフレームワークがある。もしあなたが使ったことがあれば、それに近い TypeScript がどれほど素晴らしいかがわかりやすいだろう。

これからも進化していく TypeScript 、もしあなたが JavaScript は使っているが TypeScript を使ったことがないならもったいない。ぜひ試してみよう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です