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で統一できれば、開発に利用するモジュールあるいはノウハウが領域間で共有できます。
また、言語2つ以上になれば学習コストが大幅に膨らみます。
そのため、統一言語としてTypeScriptを利用できれば、学習コストが減りパフォーマンスを最大化できます。
TypeScriptの特徴
TypeScriptは、静的型付け以外の部分はJavaScriptそのものです。
そのため、TypeScriptはJavaScriptに類似していますが、JavaScriptと異なる点としていくつかの特徴を持ちます。
以下の内容がTypeScriptの特徴になります。
- TypeScriptはJavaScriptと互換性が高い
- TypeScriptは型定義ができる
TypeScriptはJavaScriptに静的型付けを付与した言語になります。
そのため、基本的に言語同士の互換性は非常に高いです。
また、TypeScript特有の型が存在します。
TypeScriptのメリットに関して詳細に知りたい人は、「【TypeScript】特徴やメリット・デメリットを徹底解説！」を一読ください。
TypeScriptとJavaScriptの記述を比較
前述した通り、TypeScirptは型定義ができるため、コンパイルによる型チェックが可能になります。
そのため、TypeScriptのほうがJavaScriptよりも厳密性が高いコードの記述になります。
TypeScriptはJavaScriptのコードによる曖昧性を補完する役割がメリットであり、JavaScriptよりもTypeScriptのほうが学習難易度が高いデメリットとも言えます。
- 変数の型
- オブジェクトの型
- 関数の型
プログラミングの基本的な文法において、上記の項目にて各言語のコード記述がどのように違うか解説します。
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型を指定しています。
また、返り値の型注釈は省略が可能になります。
関数における返り値の型注釈は省略すべきなのか
ここで、TypeScriptの関数における返り値の型注釈省略について、いくつか考える必要があります。
- 返り値の型を明示する
- 型を明示せずに型推論に任せる
上記2点において、メリットとデメリットを考える必要があります。
まず単純に返り値の型を書くことは、記述量が増えるためデメリットとも言えます。
特に、非常に短いコールバック関数などは、型の情報が不要に思えます。
しかし、関数内部のコード量が多い場合、返り値の型を明示することはメリットになります。
また、もう一つの利点は、関数内部の返り値の型に対して型チェックを働かせられる点です。
これは、返り値で宣言した型と食い違うk多の値を返そうとした場合に、return文でエラーを発見できます。
つまり、TypeScriptの型チェックによってコード実装のミスを未然に防ぐことができます。
TypeScriptの弱点とは
TypeScriptを利用する上で、TypeScriptで解決できない場面を把握しておくことは重要です。
開発時にTypeScriptの弱点を理解することで、改善策が立てやすいからです。
TypeScriptの言語特性からアプローチできるかどうかを知っておきましょう。
- 実行時の高速化・省メモリ化に影響しない
- TypeScriptランタイムはない
- TypeScriptコンパイラは最適化しない
上記の各弱点をさらに詳しく理解したい人は、「【TypeScript】言語の難易度やJavaScriptと比較して徹底解説！」を一読ください。
コメント