TypeScript：静的分析、自動補完、およびJavaScript用のES6のビット

メール、カード、ワードプロセッサ、コラボレーションツールなどのWebアプリケーションは、私たちの生活の不可欠な部分になっています。 TypeScriptプログラミング言語は、そのようなアプリケーションの開発者のニーズを満たすように設計されました。 ソフトウェアコンポーネント間のインターフェイスの定義を容易にし、既存のJavaScriptライブラリの動作を調査するのに役立ち、動的にロードされるモジュールにコードを編成することで名前の競合のリスクを減らします。 TypeScript型システム（これはオプションです）を使用すると、静的分析、シンボリックナビゲーション、オートコンプリート、コードリファクタリングなどの高性能開発ツールや手法を使用できます。



TypeScriptはJavaScriptの構文糖衣です。 TypeScript構文は、EcmaScript 5（ES5）構文のスーパーセットです。 すべてのJavaScriptプログラムは有効なTypeScriptプログラムです。 TypeScriptコンパイラはローカルファイル変換のみを実行し、変数のオーバーライドは行いません。 これにより、元のJavaScriptにできるだけ近いコードを記述できます。 TypeScriptは変数の名前を変更しないため、デバッグプロセスが予測可能になります。 コンパイラはソースマップも提供します。

型システム

私の意見では、これはTypeScriptの主要な機能であり、実際に試してみる価値があります。 オプションの型システムを使用すると、コード内で直接アノテーションを使用して、JavaScript機能を制限したり、これらの制限を強制するツールを使用したりできます。 TypeScriptは積極的に型推論を使用して、注釈の数を最小限に抑えます。 この機能を使用すると、オートコンプリートを使用して、型の非互換性を示すことができます。これは、複雑なJavaScriptアプリケーションを開発する場合には欠けています。 TypeScriptの値のタイプは、コードで直接指定されます。

function process(x: number, y: number) { var v = x + y; return v; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

戻り値の型を指定することもできます（この場合、型システム自体が型を決定できます）。

 function process(x: number, y: number): number { var v = x + y; return v; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オブジェクトの場合、インターフェイスを介してタイプを指定できます。

 interface Thing { a: number; b: string; foo(s: string): string; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらの広告は、別々のファイルに結合できます。 C、C ++のヘッダーファイルに似ています。 新しいプログラムの説明だけでなく、既存のライブラリの説明も作成できます。 TypeScriptは、Node.js、jQuery、DOMの既製の説明を提供します。

クラスとモジュール

TypeScript構文には、特定のクラスおよびモジュールで、EcmaScript 6（ES6）によって提供されるいくつかの機能が含まれています。 TypeScriptのサンプルクラス：

 class Point { x: number; y: number; constructor (x: number, y: number) { this.x = x; this.y = y; } dist () { return Math.sqrt(this.x * this.x + this.y * this.y); } static origin = new Point(0, 0); } var p = new Point(10, 20); var dist = p.dist(); var zeroPoint = Point.origin;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

TypeScriptモジュールは、既存のCommonJS、AMDアプローチを使用してモジュラーシステムを実装します。



モジュールの例：

 module Acme.Core.Utils { export class Tracker { count = 0; start () { windows.onmouse = e => { console.log(this.count); }; } } } import ACU = Acme.Core.Utils; var t = new ACU.Tracker(); t.start();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、EcmaScript 6の別の新機能、つまり関数の短い構文も確認できます。 簡潔さに加えて、これらの関数には字句コンテキストがあり、動的コンテキストが望ましくない状況（イベント処理、非同期操作など）での問題を回避するのに役立ちます。

おわりに

したがって、TypeScriptはJavaScriptの軽量構文シュガーであり、既存のコードとの互換性を維持し、お気に入りのJavaScriptライブラリを引き続き使用しながら、豊富なツールセットを使用できるようにすることで生産性を大幅に向上できるプリプロセッサです。



公式ウェブサイト： www.typescriptlang.org

インサイダーインストール： npm install -g typescript

インタラクティブコンソール： www.typescriptlang.org/Playground

Anders Hejlsbergの優れたビデオプレゼンテーション： channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript