本文へスキップ
BecomeCoder
ブログ一覧コース一覧

TypeScriptとJavaScriptの違いとは？いつ移行すべきか

#TypeScript#JavaScript#型

結論：JavaScriptに「型」を足したのがTypeScriptで、書いたコードは最終的にJavaScriptに変換されて動きます。 個人の小さなスクリプトならJavaScriptのままで十分ですが、コード量が増えて「このデータに何が入っているか自分でも分からなくなってきた」と感じ始めたら、それがTypeScriptに移行するタイミングです。

JavaScriptとTypeScriptは「別の言語」ではない

TypeScriptはJavaScriptを置き換える別言語ではなく、JavaScriptに型注釈という文法を追加した拡張です。TypeScriptで書いたコードは、最終的に型情報を取り除いたただのJavaScriptに変換（コンパイル）されてから実行されます。つまりTypeScriptを学ぶことは、JavaScriptの知識をそのまま引き継いで「型」という考え方を上乗せすることに他なりません。

だからこそ順序としては、まずJavaScriptの基本（変数・条件分岐・関数・配列やオブジェクトの扱い）を身につけてから、TypeScriptの型注釈に進むのが自然です。

型があると何が変わるのか

JavaScriptでは、変数にどんな種類の値を入れるかを実行するまでチェックしません。次のようなコードは、実行してみて初めて「あ、文字列を数値として使ってしまった」と気づきます。

function add(a, b) {
  return a + b;
}
add("3", 4); // "34" になる（数値の足し算にならない）

TypeScriptでは、変数や関数の引数に「これは数値です」「これは文字列です」といった型を明示できます。すると同じ間違いを、実行する前・コードを書いている最中に指摘してもらえます。

function add(a: number, b: number): number {
  return a + b;
}
add("3", 4); // ここでエラーになり、実行前に気づける

この「実行する前に間違いに気づける」という点が、JavaScriptとTypeScriptのいちばんの違いです。型注釈そのものの基本はTypeScriptコースの「基本の型と型推論」レッスンで、関数の引数と戻り値への型づけは「関数の型」レッスンで、オブジェクトの形を決めるinterfaceは「interface」レッスンで、それぞれ実際にコードを書きながら確認できます。

いつTypeScriptに移行すべきか

型があることは常に得とは限りません。型注釈を書く分だけコード量は増えますし、慣れるまでは「なぜこの型エラーが出るのか」で立ち止まる時間も発生します。目安は次のとおりです。

つまりTypeScriptは「コードが自分の頭の中だけで完結しなくなったとき」に効いてくる道具です。個人の学習用スクリプトを書いている段階では、無理に急いで移行する必要はありません。JavaScriptの基本を十分に触ったあとで、型を足すとどう変わるかを実際に比べてみるのがおすすめです。

つまずきやすいところ

TypeScriptを学び始めると、実行前の段階で赤い波線つきのエラーが大量に出て面食らうことがよくあります。代表的なものを挙げます。

JavaScript側でも、Cannot read properties of undefinedのように「実行するまで気づけない」エラーは頻出します。詳しくはJavaScriptのエラー逆引き「Cannot read properties of undefined」を参照してください。TypeScriptの型エラーの多くは、こうしたJavaScriptの実行時エラーを「事前に」教えてくれているだけだと考えると理解しやすくなります。

次に読む

どちらもインストール不要・無料・登録不要でブラウザからそのまま実行できます。まずはJavaScriptの1レッスン、慣れてきたらTypeScriptの1レッスンを、実際に手を動かして試してみてください。

← ブログ一覧に戻る