【TypeScript VS JavaScript】コードの比較による言語の違いを解説！

2024年2月28日2024年4月25日

TypeScriptの学習において、必ずJavaScriptが深く関与します。

至極当然で、TypeScriptはJavaScriptに静的型付けを付与した言語だからです。

本記事では、TypeScriptとJavaScriptのコード比較によって言語の違いを解説します。

TypeScriptとJavaScriptの違い

TypeScriptは、”JavaScript + 静的型付け”である言語です。

つまり、端的にTypeScriptとJavaScriptの違いで言えば、静的型付けが利用できるかどうかになります。

TypeScriptとJavaScriptがどのような関係にあるか理解することで、TypeScriptの学習の上で重要になります。

そのため、JavaScriptよりも覚えることが多く、比較すると難易度が高めになります。

TypeScriptの学習難易度

TypeScriptは、静的型付け以外の部分はJavaScriptであるため、JavaScriptと比較すると学習難易度高めです。

つまり、JavaScriptの学習＋型定義を理解すれば文法レベルであれば問題ないです。

また、学習難易度は比較的高めですが、利用するべきメリットも存在します。

さらに詳しくTypeScriptの人気を知りたい人は、「【TypeScript】難しい理由と解決策を徹底解説！」を一読ください。

TypeScriptを導入・採用するメリット

開発領域としてフロントエンド・バックエンド両方でTypeScriptを導入・採用すると、多くのメリットが享受できます。

つまり、開発プロジェクト内で使用する言語が1つであることはメリットになります。

開発言語が1つであれば、以下の利点が生まれます。

TypeScriptを導入・採用するメリット

モジュール共有
開発プロジェクト内のノウハウ共有
学習コストパフォーマンス最大化

想像が容易いかと思いますが、開発領域を超えてTypeScriptで統一できれば、開発に利用するモジュールあるいはノウハウが領域間で共有できます。

また、言語2つ以上になれば学習コストが大幅に膨らみます。

そのため、統一言語としてTypeScriptを利用できれば、学習コストが減りパフォーマンスを最大化できます。

TypeScriptの特徴

TypeScriptは、静的型付け以外の部分はJavaScriptそのものです。

そのため、TypeScriptはJavaScriptに類似していますが、JavaScriptと異なる点としていくつかの特徴を持ちます。

以下の内容がTypeScriptの特徴になります。

TypeScriptの特徴

TypeScriptはJavaScriptと互換性が高い
TypeScriptは型定義ができる

TypeScriptはJavaScriptに静的型付けを付与した言語になります。

そのため、基本的に言語同士の互換性は非常に高いです。

また、TypeScript特有の型が存在します。

TypeScriptのメリットに関して詳細に知りたい人は、「【TypeScript】特徴やメリット・デメリットを徹底解説！」を一読ください。

TypeScriptとJavaScriptの記述を比較

前述した通り、TypeScirptは型定義ができるため、コンパイルによる型チェックが可能になります。

そのため、TypeScriptのほうがJavaScriptよりも厳密性が高いコードの記述になります。

TypeScriptはJavaScriptのコードによる曖昧性を補完する役割がメリットであり、JavaScriptよりもTypeScriptのほうが学習難易度が高いデメリットとも言えます。

TypeScriptとJavaScriptの比較対象

変数の型
オブジェクトの型
関数の型

プログラミングの基本的な文法において、上記の項目にて各言語のコード記述がどのように違うか解説します。

TypeScriptとJavaScriptの変数の型

最も基本的なプログラムの一つとして、以下のプログラムを記述します。

const message = "Hello World!";
console.log(message);

上記のコードは、JavaScriptによる記述になります。

変数であるmessageには文字列が代入されていますが、数値などに変更することも可能です。

const message: string = "Hello World!";
console.log(message);

一方で、TypeScriptは変数であるmessageに対してstring型を定義しています。

そのため、string型ではない値が代入されていた場合にコンパイルエラーが発生します。

このように、TypeScriptの静的型付けによってコードの安全性を高めています。

TypeScriptとJavaScriptのオブジェクトの型

ここでは、基本的なプレーンオブジェクトに関するプログラムを記述します。

const obj = {
    number: 123,
    text: "Hello",
};

console.log(obj.number);
console.log(obj.text);

JavaScriptによるプレーンオブジェクトでは、オブジェクト内のプロパティに対して変数を2つ用意しそれぞれに値を格納しているだけになります。

const obj: {
    number: number;
    text: string;
} = {
    number: 123,
    text: "Hello",
};

console.log(obj.number);
console.log(obj.text);

変数の型の時と同様、オブジェクト内のプロパティに対しても型を定義することができます。

このように、コードのドキュメント化（コードのまとまり）が多く発生する場合に、読み手の負担が減るメリットもあります。

TypeScriptとJavaScriptの関数の型

ここでは、functionによる簡単な関数を作成し、関数の型定義を示します。

const language_name = "TypeScirpt";
// 関数の実装
function getName(language_name) {
    return language_name;
}
//関数の実行
console.log(getName(language_name));

変数であるlanguage_nameを定義し、functionによる関数を作成しています。

引数を返すだけのシンプルな関数になります。

const language_name: string = "TypeScirpt";
//関数の型
type getName = (language_name: string) => string;
// 関数の実装
function getName(language_name: string): string {
    return language_name;
  }
//関数の実行
console.log(getName(language_name));

一方で、TypeScriptではtype文を利用して関数の型を定義しています。

ここでは、string型を指定しています。

また、返り値の型注釈は省略が可能になります。