TypeScriptとJavaScriptの違い

TypeScriptとJavaScriptの違いのまとめ

	定義	型付け	実行環境
TypeScript	JavaScriptを拡張した静的型付き言語	静的型付け（コンパイル時に型チェック可能）	トランスパイルでJavaScriptに変換して実行
JavaScript	WebブラウザやNode.jsで動くスクリプト言語	動的型付け（実行時に型が決まる）	そのままブラウザやNode.jsで実行できる

JavaScript = 動的・柔軟・即実行できる → 小規模向け

TypeScript = 型安全・保守性が高い → 大規模向け

TypeScriptは最終的にJavaScriptに変換されるため、実行環境はすべてJavaScriptと同じです。

JavaScriptのコード例

引数の型が意図しない場合でも実行されてしまう例。

function add(a, b) {
  return a + b;
}

console.log(add(10, "20")); // "1020"

5行目の引数は、number型とstring型ですが、結合されます。

TypeScript のコード例

1行目で、引数の型チェックを行い、事前にエラーを検出します。

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(10, "20")); //コンパイルエラー: 'string' 型の引数を 'number' 型のパラメーターに割り当てることはできません

TypeScriptとは

概要

Microsoftが開発したオープンソース言語です。
JavaScriptをベースに、静的型付けやクラスベースのオブジェクト指向などを追加しています。
ブラウザやNode.jsは直接TypeScriptを理解できないため、トランスパイルしてJavaScriptに変換して実行します。
TypeScriptは、型安全なJavaScriptです。

トランスパイルとは

プログラミング言語を別のプログラミング言語に変換することです。

特徴

１．静的型付け

変数や関数に型を指定でき、コンパイル時にエラー検出が可能。

２．強力な開発支援

VSCodeなどのエディタで補完・リファクタリングがしやすい。

大規模開発でどの関数に何を渡せるかが明確になる。

３．最新JavaScript + α の機能

ES6以降の機能（クラス、モジュール、アロー関数など）をサポート。

インターフェース・ジェネリクス・enumなどTypeScript独自機能も利用可能。

４．保守性・大規模開発に強い

チーム開発でありがちな型の勘違いによるバグを事前に防止できる。

React、Angular、Next.js などのフレームワークとの相性が良い。