TypeScriptとJavaScriptの比較

TypeScriptはMS（マイクロソフト）が開発した開発言語で、JavaScriptを基にして作られました。JavaScriptの短所を 補完して、より開発にサポートできる言語として開発されました。基本的な文法はJavaScriptと似ていますが、どんな違いがあるか、その特徴などをこの記事でまとめようとします。

1. タイプ （データの型） の定義
   • JavaScript: JavaScriptは動的な言語で、変数の宣言、またはメソッドのリターンやパラメータはどのタイプ（データの型）を定義しなくても、自動的にタイプが設定されます。

       let test = 'a';
       test = 1; // testのtypeはanyに自動設定

   • TypeScript: TypeScriptは静的な言語です。 変数の宣言、またはメソッドのリターンやパラメータはどのタイプ（データの型）を定義できます。もちろん、JavaScript と同様に タイプ（データの型）を定義しなくても、自動的にタイプが設定されたりもしますが、any は設定できません。

     let one = 'a'; // oneのtypeはstringに自動設定。 
     // one = 1; // error発生: Type 'number' is not assignable to type 'string'.
     let two: number = 1; // twoのtypeをnumberに設定。 
     two = 2;
     // two = '3'; // error発生: Type 'string' is not assignable to type 'number'.

2. 開発の便利さ
   • JavaScript: タイプエラーの場合、ランタイムエラーチェックに依存するため、実際にコードを実行する前にはエラーの探知ができない可能性があります。
   • TypeScript: コードが実行する前にエラーを探知できます。コードのクオリティ上昇とランタイムエラーを減らせます。
     

     

     
     左が TypeScriptです。if文の条件でタイプエラーが発生していることを実行前に探知されています。
3. ツールおよびIDEの支援
   • JavaScript: タイプ情報に基づいたツール・IDEが内蔵されていません。
   • TypeScript: タイプシステムによる自動完成、コード探索およびリファクタリング提案などの、ツール・IDE機能を支援します。
4. 互換性
   
   • JavaScript: すべての最新ウェブブラウザと互換ができる。Node.jsを使ってサーバー側で実行できます。
   • TypeScript: ブラウザやサーバーで実行する前、まずJavaScriptに変換する必要があります。プロジェクトの要求により、各異なるバージョンのJavaScript（ES3、ES5、ES6など）を対象にできます。
5. 構文および機能
   
   • JavaScript: DOM操作、イベント処理、HTTP呼び出しなどを含めたウェブアプリの開発のための基本構成要素を提供する標準Script言語です。標準言語のため、パソコンには基本的に内蔵しております。なので、JavaScriptの開発のため、インストールなどは要りません。
   • TypeScript: TypeScriptはJavaScriptをベースにして開発された言語で、JavaScriptで有効なコードはすべて TypeScriptでも有効です。さらに性的type、interface、enumなどを追加して開発者がより安定的なコードを作成できるようにサポートとしてくれます。TypeScriptの開発のためにはインストールをする必要があります。

TypeScriptはより便利な開発のため進化したJavaScriptだと思います。JavaScriptの文法と似ているので、JavaScriptに慣れているフロントエンジニアも、JavaやCみたいな静的な言語に慣れているバックエンドエンジニアも学びやすい、学習コストが比較的に低い開発言語だと思います。