サーバー上のTypeScript

特にAngular2の普及により、TypeScriptは最近急速に人気を集めています。 同時に、TypeScriptはサーバーで特に人気があるわけではありません。 多くの人がTypeScriptを試してみたいと思っていますが、長い間その設定を処理する能力/欲求がありません。 この記事では、ES6 / Nextコードとほとんど変わらないように、最小限の複雑さでサーバーでTSの使用を開始する方法と、それが必要な理由を説明します。

TypeScriptには、ESコードトランスパイラー（バベルなど）、オプションのコードタイピング（フローなど）、追加の検証ルール（リンター関数の一部）、JSにない言語構成（CoffeeScriptなど）、外部ライブラリのタイピングなど、使用に関するいくつかの側面があります。

さらに、これらの側面はほとんど独立しており、それらの使用はオプションです。 TSを始めたとき、環境をすばやくセットアップすることが重要だったので、限られた機能セットを使用していましたが、将来はこの使用モードが好きで、今ではほとんどのプロジェクトで使用しています。 これには多くの利点がありますが、コードはJS ES6 / Nextの最新バージョンとほぼ同じです（サンプルをJSに統合するのは簡単で、JSコードに変換するのは簡単です）。 将来、必要に応じて、プロジェクトはより高度な機能を使用できます。 TSのさまざまな側面を詳しく見てみましょう。

トランスポーターとしてのTypeScript

放送するかどうか？ ほとんどの新しいプロジェクトではES6を使用していますが、これはJS言語への非常に大きな追加であり、開発の快適さと有効性にとって本当に重要です。 最新のLTSバージョンでは、ES6ノードはほぼ完全にサポートされており、追加のトランスピレーションなしで使用できます。 ES6に慣れていない場合は、多数の入門記事があります 。たとえば、 こちらで読むことができます 。

ES6に加えて、この言語の主な新機能の1つは、TSでサポートされているasync / awaitです。 これは、コールバックとプロミスの後の次のステップである非同期コードを操作するための新しいアプローチです。 メリットの詳細については、 こちらをご覧ください。 async / awaitのサポートは既にノードにありますが、LTSバージョンにはまだありません。 新しいプロジェクトを作成するときは、すぐにasync / awiatを使用するのが理にかなっています。 第一に、それははるかに便利であり、第二に、promiseからasync / awiatへのコードのさらなる変換には追加の努力が必要であり、すぐにそれを行う方が良いです。

さらに、TSはES6スタイルでのインポートをサポートしています（require ...ではなくfrom ...）。このためのノードでのサポートはすぐには行われません。 ここでより多くの機能があります 。 しかし、TSでは現在使用でき、仕様の100％実装ではありませんが、ほとんどの場合、これは重要ではありません。

コードをローカルで簡単にデバッグするには、開発者のマシンでES6でコードをコンパイルすることをお勧めします。 ローカルでは、6.xノードのバージョンが必要ですが、本番ノードは古いバージョンのノードを使用できます。その後、本番用にコンパイルする場合、TSから直接またはBabelを使用して、ES6からES5にさらにコンパイルする必要があります。

コードタイピング

なぜこれが必要なのですか？ 厳密な型付けにはいくつかの利点があります：型を介して署名を記述することにより、コンパイル時に多くのエラーをキャッチできます。たとえば、メソッドが数値を受け取って文字列を渡すと記述すると、TSコンパイラーはすぐにそのことを通知します。 さらに、タイプの説明により、IDEはより正確なヒントを提供し、コードをより速く書くことができます。 さらに、他のプログラミング言語では強力な型指定によりパフォーマンスが向上しますが、TSでは型注釈のないJSコードがコンパイルで生成されるため、これは関係ありません。

厳密な型付けには欠点もあります。型を記述するのにより多くの時間が必要です。型はコードの可読性を損なうことがあり、ある型を別の型に変換するときに問題が生じることがあります。

良いニュースは、TSではタイピングがオプションであることです。 コンパイラレベルでは、各変数/パラメーターに型があり、TSコードが指定されていない場合、anyが想定されます。つまり、変数は任意の型の値を取り、TSはそれを許可します。

適切なだけのタイピングを使用できます。 単純なプロジェクトの場合、追加の入力はほとんど使用しません;基本的なTSチェックで十分です。 しかし、ライブラリを作成したり、大規模で複雑なプロジェクトで作業する場合、タイピングは理にかなっており、ライブラリの実装に必要な余分な時間を正当化します。

TSで始めたばかりの場合、またはJSコードを移行する場合は、入力せずに開始し、徐々に追加する必要があります。 そうすれば、その使用の本当の利点を理解できます。

外部ライブラリの入力

TSでは、宣言ファイル（宣言ファイル* .d.ts）を使用してJSライブラリを記述できます。 同時に、TSは十分な柔軟性を備えており、さまざまなタイプのライブラリとその使用モード（グローバルライブラリ、モジュール、UMPなど）をサポートしています。 TSの出現のほぼ直後に、oupensource DefinitelyTypedリポジトリが登場しました。このリポジトリでは、マニアのツールが多くの異なるJSライブラリの宣言ファイルを追加および更新しました。

当初、TS開発者は宣言ファイルの管理の問題に対処していませんでした。tsdおよびタイピングプロジェクトは、npmパッケージのインストールと同様の方法でこれらのファイルをインストールできるようになりました。 TypeScript 2.0以降では、npmを使用して宣言ファイルをロードできます。 詳細はこちら 。

TSを使用してノードで開発するには、少なくともノードの宣言ファイルが必要です

npm install -D @types/node
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、グローバルrequire / process / globals、標準fs / path / streamモジュールなどのNode API宣言がインストールされます。 このパッケージは、古いバージョンのノードに適した最新バージョン7.xのノードAPIについて説明しています。

TSの以前のバージョンでは、各ノードモジュールを宣言する必要がありました。 宣言ファイルを使用するか、任意のスタブを使用します。

 declare module "my-module";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

TS 2.1以降、モジュールの説明はオプションです;そうでない場合、モジュールはanyタイプであると想定されます（任意のメソッド/プロパティを呼び出すことができます）。 それでも、TSはモジュールがインストール（ロード）されていること、つまり npmパッケージをインストールするまでプロジェクトをビルドできません。

特に初心者の場合は、宣言ファイルを注意して使用してください。 署名検証と最高の自動アドオンの利点にもかかわらず、宣言ファイルには多くの問題もあります。

ほとんどの場合、宣言ファイルとライブラリ自体は異なる人々によって作成され、完全には同期されていません。 また、ドキュメントには、宣言ファイルにない有効な署名が記載されている場合があります。 さらに、宣言ファイルを使用するときは、コードでより多くの型を使用する必要があり、純粋なJSコードとはすでに非常に異なっています。

私のプロジェクトでは、しばしばnodeの宣言と、オプションでlodashの宣言に限定しています。

TS固有の言語構造

TSには、JS標準にない言語構成要素がいくつかあります。 たとえば、Enum。 enumとconst enumの2つのバージョンがあります。

定数列挙型を使用すると、数値の型指定された名前を指定できます。次に例を示します。

 const enum Size { Small = 1, Medium, Large } let size = Size.Large; //   "let size = 3"  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

標準列挙型には、さらに多くのオプションがあります。

 enum Size { Small = 1, Medium, Large } let size = Size.Large; //size = 3   let sizeName = Size[Size.Large] // sizeName = 'Large'  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、標準のTS列挙が次の形式の構造にコンパイルされるという事実によって達成されます。

 var Size; (function (Size) { Size[Size["Small"] = 1] = "Small"; Size[Size["Medium"] = 2] = "Medium"; Size[Size["Large"] = 3] = "Large"; })(Size || (Size = {}));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

一方では便利ですが、コードがJSと互換性がなくなると同時に、TSの知識のない開発者がそれを理解するのが難しくなり、デバッグに問題がある可能性があります。

TSを最小限に使用して、このような構造を避けることをお勧めします。

TSを使用する実用的な機能

TSには、初心者の開発者が知っておくべき多くの機能があります。

モジュールのインポート

次のように外部モジュールをインポートします。

 import * as fs from 'fs'; // JS  import fs from 'fs'; // import * fs from 'fs';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

エクスポートのデフォルトを使用してモジュールを書くことができます

 //  greeter.ts export default { hi, hey } function hi() {console.log('hi');} function hey() {console.log('hey');} //  import greeter from './greeter'; greeter.hi();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ES6標準に従って、登録済みのエクスポートを使用することもできます。 詳細はこちら 。

にキャスト

TSでは、必要に応じて変数を使用できず、その間違った型をポイントできないことがあります。 この場合、いつでもanyにキャストできます。

 let sayHello = (name: string) => { console.log(`Hello, ${name}!`); }; let x = 20; sayHello(x); // ,   x ,     sayHello(x as any); // sayHello(<any>x); // 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これはあまり良くないので避けるべきですが、この方法で問題を素早く解決することが便利な場合があります。

オブジェクトに最初に存在しないプロパティがある場合は、すぐに空に設定することをお勧めします。そうしないと、TSが間違ったタイプについて文句を言います。

 let myObj = { name: 'my_obj', value: 24, tag: null } if (myObj.value > 20) { myObj.tag = 'xyz'; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メソッドのオプションのパラメーター

特定の数の引数を使用してメソッドを宣言する場合、TSは完全一致を要求します。 これをJSのように機能させるには、オプションのパラメーターを使用する必要があります。

 function doAction(action, title = null) { if (title) { console.log(`Doing action ${title}...`); } action(); } ... doAction(() => {console.log('Files were removed!')}, 'Delete'); doAction(() => {console.log('Project was created!')});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ポイントタイピングとnull許容型

たとえば、パラメータをオブジェクトとして取得するメソッドや、特定の有効なセットから文字列パラメータを取得する場合など、最も意味のある場所に、タイピングを個別に追加できます。

 interface CommandOptions { path: string, params: string[], title?: string //   } function executeCommand(command, options: CommandOptions) { //... } type Color = 'red' | 'black' | 'white'; function log(message, color: Color) { ///... } logger.log('hey', 'black'); //,     logger.log('ho', 'yellow'); // 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

環境設定

TSを使用するには、環境を構成するためにもう少し時間が必要です。 TSは、JSのほとんどのIDE /エディターでサポートされています。 自動補完、リファクタリング、そして最も重要なこととして、WebStormとVS Codeでのデバッグの最適なサポート。

VS Code開発者はTS開発者と緊密に連携するため、TSサポートが最適です。

コンパイルとデバッグのセットアップの詳細についてはこちらをご覧ください ：WebStormの場合はこちら 、VSコードの場合はこちらとこちら

typescript npmパッケージをグローバルにインストールした後、コンパイラはtsc globalコマンドとして利用可能です。 コマンドラインまたは設定ファイルを使用して、さまざまなコンパイルオプションを渡すことができます。 デフォルトでは、コンパイラはtsconfig.jsonを使用しようとします。 ここで、コンパイルオプション、およびどのファイルを含める/除外するかを指定できます。 ドキュメントWebサイトの設定の詳細については、 こちらをご覧ください 。

srcフォルダーにコードがあるノードプロジェクトのベースtsconfigは次のようになります。

 { "compilerOptions": { "target": "es6", //  es6,   es5     "module": "commonjs", //    commonjs (node require) "sourceMap": true, // sourceMaps,    "outDir": "build/src", //    /src   /build/src "rootDir": "src" }, //        /src "include": [ "src/**/*" ] }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

TSは多くのリンター機能を引き受けます。 たとえば、TSで宣言されていないグローバル変数の使用は無効であり、コンパイル時にエラーが発生します。 ただし、TSはコードの記述スタイルに制限を課しません。 この質問は主に趣味の問題であり、普遍的に受け入れられている正しいアプローチはありませんが、誰もがプロジェクトで単一のスタイルを使用する必要があることに同意します。 これは、TSLint-linter for TSの使用に役立ちます。

使用するには、tslintをグローバルにインストールします。

 npm install -g tslint
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

tslint.configファイルに必要なルールを追加します。

 { "rules": { //      "quotemark": [true, "single"], //     (  C#  Java) "semicolon": [true] // ... } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コマンドラインからtslint検証を実行できます

 tslint -p tsconfig.json //    TS 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、IDEでTSLintを構成します。 WebStormおよびVS Codeのカスタマイズの詳細。

ビルドアプリ

ノード上のバックエンドと最新のクライアントフレームワーク（React / Vue / Angular2）上のSPAクライアントを備えたフルスタックJSアプリケーションの開発に合わせたCLI ビルドアプリシステムを開発しています。 ビルドシステム自体に加えて、このセットには、単純な「Hello World」アプリケーションから、データストレージ（SQL / NoSql）、承認、電子メール送信によるロギングなどを備えた単純なWebサイトの基本機能の実装までのテンプレートセットが含まれます。

ほとんどのテンプレートは、サーバー側にTSを使用しており、記事で説明されているアプローチの例として使用できます。

さらに、ビルドアプリはTSの環境の設定に役立ちます：新しいプロジェクトを作成するとき、IDE（VSコードまたはWebStorm）の設定を生成できます。プロジェクトを監視モードで開始するオプションがあります。 。

ビルドシステムの詳細については、プロジェクトのreadmeをご覧ください。

一時コードのソースコードは、リポジトリでビルドアプリを直接使用せずに表示できます： Simple Template and Full template（mongo） 。

あなたのコメントを歓迎します。