オプションの設定


このポストは、シリーズとbook about TypeScriptの一部です.これは、ゼロからバックエンドとフロントエンド上の完全なタイプスクリプトのアプリケーションを書くことをご案内します.シリーズは、誰にでも無料でPDF電子ブックとして利用可能です.

ポストGetting Started With TypeScript Compiler (tsc)では、簡単なノードプロジェクトでいくつかのオプションを使用してtypescriptコンパイラを使い始めました.我々は、特定のルールと時計モードで我々のアプリをコンパイルするためにTSCコマンドを使用しました.これは動作しますが、より多くのオプションを使用することができますスクリプトコンパイラ.しかし、フラグの束でターミナルのコマンドと同じようにそれを使用するように快適ではありません.私たちは、ワークフローを改善することができます.JSONこの投稿では、このファイルの作成方法を学びます.
プロジェクト例は、ポストGetting Started With TypeScript Compiler (tsc)と同じです.また、それはリポジトリmxkvl/ts-node-sampleとしてgithubで利用できます.あなたがゼロから前のポストからプロジェクトを作らなかったならば、ちょっとGitHubから倉庫をダウンロードするか、このgitコマンドによって倉庫をクローン化してください
git clone https://github.com/mxkvl/ts-node-sample.git

設定ファイルの作成


まずは、タイプスクリプト設定ファイルの作成から始めましょう.プロジェクトのルートフォルダでは、特別なフラグでTSCを使用します.
tsc --init
ファイルが正常に作成されたことをTSCからのメッセージが表示されます.これで、フォルダに新しいファイルがあります.JSONこのファイルを調べましょう.あなたは別のオプションの束とJSONが表示されます.それらのほとんどはコメントされていますが、オプションはデフォルトでは有効になっていません.TSCONFIGで解説を持つコマンド全体をチェックアウトできます.JSONまたはチェックアウトdocumentationあなた自身.このガイドでは、すべてのこれらのオプションを削除する必要がありますので、私たちは、スクラッチから我々の小さなプロジェクトのtypescriptを設定します.TSconfig.JSONは次のようになります.
{
  "compilerOptions": {
  }
}
わかりました.私たちはすでに、特定のルールとウォッチモードでtypescriptをコンパイルする前の投稿からのコマンドを持っています.
tsc --module ESNext --outDir "./dist" --watch src/main.ts
ちょうど思い出させる.ファイルメインをコンパイルします.フォルダ/srcにあるts.コンパイルされたJavaScriptファイルは、フォルダ/distaになります.
さあ、TSconfigでコンパイラを設定しましょう.JSON

モジュール ルートディレクトリとoutdir


まず、ソースコードと出力コードのフォルダを指定する必要があります.私たちは既にフォルダ/srcと/distをそれのために持っています.ソースコードを含むファイルを含むフォルダとして/srcを見て、フォルダ/distaにすべてのファイルをコンパイルするためのタイプのスクリプトを教えてください.

  • rootdirはアプリケーションのソースコードを持つフォルダへのパスです(この場合は/src)

  • outdirは、コンパイルされたJavaScriptファイルを持つフォルダへのパスです.
    tsconfigを変更します.JSON :
    {
      "compilerOptions": {
        "rootDir": "./src",
        "outDir": "./dist"
      }
    }
    
    フォルダ/distを削除して、設定スクリプトに基づいてコンパイル後にtypescriptコンパイラが作成するようにします.
    rm -r dist
    
    設定ファイルを使用するので、任意のオプションを使用するか、ファイルエントリポイント(src/main . ts)を指定する必要はありません.プロジェクトのルートフォルダで使用するだけです.
    tsc
    
    TscがコンパイルされたJavaScriptコードを使用してフォルダ/distを正常に作成したことがわかります.
    ちょうどすべてが前に動作することを確認するためにアプリケーションを実行します
    node dist/main.js
    

    モジュール


    私たちは、Web browserではなく、 を使用しているJavaScriptにコードをコンパイルするために、typescriptに説明することができるというポスト242479152からすでに知っています.そのために、TSCの特別なオプションを使用しました.
    tsc --module ESNext src/main.ts
    
    これでtsconfigで指定できます.JSON :
    {
      "compilerOptions": {
        "rootDir": "./src",
        "outDir": "./dist",
        "module": "ESNext"
      }
    }
    
    それはTSCのモジュール--フラグと同じ働きます.コードを再度コンパイルすることができ、現在コンパイルされているJavaScriptコードでESモジュールを使用していることを確認できます.
    メイン.js
    // ...
    import { createQuestioner } from "./createQuestioner";
    import { greeting } from "./greeting";
    // ...
    

    TypeScriptコンパイラ( TSC )から始める ターゲット


    Typescriptコンパイラの次の重要なオプションはtargetと呼ばれます.TSconfigを作成したときに注意してください.オプションのターゲットは既に設定ファイルに値ES 5で設定されています.
    これは、タイプスクリプトがコードをバージョンES 5のJavaScriptコードにコンパイルすることを意味します.言い換えると、このコンパイルされたコードは、ブラウザやノードによって実行されます.したがって、アプリケーションを実行する必要がある環境(Webブラウザやノードの特定のバージョン)がJavaScriptの最新機能をサポートしていない場合は、この環境によってサポートされているJavaScriptのバージョンを使用してオプションターゲットを設定する必要があります.
    実際には、環境がWebブラウザである場合、つまりフロントエンドプロジェクトで動作する場合、オプションターゲットの値ES 2015を使用します.もちろん、いくつかの特定のWebブラウザを持っていない場合は、バージョンES 3でJavaScriptを実行する必要があります.
    ノードについては、どのようなTSCONFIGについての勧告を持つ242479152の情報があります.使用するJSONの設定.
    特定のノードのバージョンに対してどのターゲットを使用するかを示すテーブルです.
    バージョン
    ターゲット
    16
    ES 2021
    14
    ES 2020
    12
    ES 2019
    10
    ES 2018
    8
    ES 2017
    また、ノードに関する情報を含むプロジェクトES Modulesをチェックしてください.js互換性.

    CommonJSモジュール 例


    ファイルmainのコード例で.我々は非同期コードを管理するための非同期/待機の建設を使用します.Async/Wait It建設は、 のES 2017バージョン以来利用できました.
    どのようにメインのように見えます.TS
    const firstName = await questioner.ask("Type your first name: ");
    const username = await questioner.ask("Type your username: ");
    
    オプションターゲットをEE 2015に設定します.
    {
      "compilerOptions": {
        "rootDir": "./src",
        "outDir": "./dist",
        "target": "ES2015"
      }
    }
    
    コードをコンパイルします.
    tsc
    
    次に、dist/mainファイルを開きます.エディタでjs.私たちのコードのどこに、async/waitの建設があったかについて、あなたは、何か他の何かが現在あるとわかります
    // ...
    function main() {
        return __awaiter(this, void 0, void 0, function* () {
            try {
                const questioner = createQuestioner();
                const firstName = yield questioner.ask("Type your first name: "); // async await??
                const username = yield questioner.ask("Type your username: ");
                greeting(firstName, username);
                questioner.finishUp();
            }
            catch (e) {
                console.error(e);
            }
        });
    }
    // ...
    
    コンパイルされたコードがメインで使用しているAsync/WAITを持っていない理由.TSSは、JavaScriptのバージョンにコンパイルされたコードで、Webブラウザで実行することができます.
    さて、オプションターゲットをES 2017(またはES 2017以上のバージョン)に設定し、tsc --initを実行します.オープンファイルdist/main.再びJS.次のようになります.
    // ...
    async function main() {
        try {
            const questioner = createQuestioner();
            const firstName = await questioner.ask("Type your first name: ");
            const username = await questioner.ask("Type your username: ");
            greeting(firstName, username);
            questioner.finishUp();
        }
        catch (e) {
            console.error(e);
        }
    }
    // ...
    
    この動画はお気に入りから削除されています.してください、on GitHub日まで滞在する.
    node.green