TypeScriptとJavaScriptの違いを初心者向けに簡単解説

まずは、これだけ

TypeScriptは、JavaScriptに「値の種類を確認する仕組み」を加えた言語。
実行前に間違いへ気づきやすくし、最後はJavaScriptへ変換して動かします。

TypeScriptを型チェックしてJavaScriptへ変換し、ブラウザで実行する流れ
TypeScript:開発中にチェックJavaScript:ブラウザで実行

TypeScriptはJavaScriptを広げた言語

TypeScriptではJavaScriptとほぼ同じ処理を書けます。大きな違いは、文字列・数値・オブジェクトなど、データの形をあらかじめ示せることです。

たとえば「年齢には数値が入る」と決めておけば、誤って文字列を渡したときに、実際に画面を動かす前からエディターやチェック処理が知らせてくれます。

JavaScript

すぐ実行でき、柔軟に値を扱える。

TypeScript

型を使い、開発中に矛盾を見つけやすい。

共通点

Web画面の動きや処理を書く目的は同じ。

実行する前に間違いを見つける

JavaScriptでは、間違った種類の値が渡されても、その処理を実際に通るまで問題に気づけない場合があります。TypeScriptはコードを確認し、合わない組み合わせを先に警告します。

コードを直接実行する方法と、検査ゲートで間違いを見つけてから実行する方法の比較
TypeScriptの型チェックは、コードを実行する前に合わない値や呼び出し方を見つける検査ゲートのような役割です。
1型を書く期待するデータを示す
2チェック矛盾を探す
3修正実行前に直す
4変換JavaScriptにする
5実行ブラウザで動く

規模が大きいほど役立ちやすい

小さなコードなら、どの値がどこで使われるか覚えていられます。しかし画面や機能、開発者が増えると、データの形を共有することが難しくなります。

開発チームが形の決まった部品を使って大きなWebアプリを安全に組み立てる様子
型は、データの使い方をチームで共有する設計図としても働きます。
入力補助

使える項目や関数をエディターが提案しやすい。

変更に強い

データ構造を変えた影響箇所を探しやすい。

意図を共有

何を渡し、何を返す処理か読み取りやすい。

TypeScriptでも実行時の問題は起こる

型チェックで、通信失敗、利用者が入力した想定外の値、サーバーから届く誤ったデータなどをすべて防げるわけではありません。外部から受け取る値は、実行時にも確認が必要です。

また、最初は型の書き方や変換環境を学ぶ必要があります。短い試作品ではJavaScriptの手軽さが合う場合もありますが、長く育てるアプリではTypeScriptが選ばれることが増えています。

ここまでのまとめ

TypeScriptはJavaScriptを別物へ置き換えるのではなく、開発中の確認と共有を助ける仕組みを足した言語です。