すべての TypeScript ソースを監視およびコンパイルする

1. JavaScript の実行
2. TypeScript から JavaScript へのトランスパイルプロセス
3. TypeScript ソースをコンパイルする
4. 監視するように TypeScript コンパイラを構成する

この記事では、すべての TypeScript ソースを監視およびコンパイルする方法について説明します。

JavaScript の実行

TypeScript 言語は、JavaScript の型付きバージョンです。TypeScript 構文は ES2015 構文のスーパーセットであるため、すべての JavaScript コードは構文的に有効な TypeScript です。

場合によっては、JavaScript コードが TypeScript コンパイラによって有効なコードとして処理されないことがあります。これは、TypeScript 言語のコンパイル時の型チェック機能によるものです。

型の誤った使用によって発生するほとんどのランタイムエラーを回避します。

ご存知のように、ブラウザは JavaScript コードを実行できます。すべてのブラウザには、JavaScript プログラムを解釈し、その場で実行するブラウザ固有の JavaScript エンジンが含まれています。

通常、Chrome ブラウザには Google の V8 JavaScript エンジンが付属しており、Firefox は SpideMonkey エンジンを使用して JavaScript を処理します。現在、JavaScript はサーバー側でも実行できます。

Node.js は、ブラウザの外部で JavaScript コードを実行するために Chrome の V8JavaScript エンジン上に構築された JavaScript ランタイムです。したがって、ブラウザと Node.js のようなサーバー側のランタイム環境は、JavaScript コードのみを解釈できます。

TypeScript から JavaScript へのトランスパイルプロセス

TypeScript 言語の進化に伴い、JavaScript エンジンは JavaScript 言語と相互作用することしか知られていないため、トランスパイルプロセスが必要でした。JavaScript エンジンには、TypeScript に関する手がかりがありません。

トランスパイルは、TypeScript コードが JavaScript バージョンに変換される場所です。次に、変換された JavaScript ピースを JavaScript エンジンにスローして実行できます。

TypeScript ソースコードに遭遇したときはいつでも、すべての TypeScript ソースを JavaScript にコンパイルするための追加のステップがあります。TypeScript ソースのコンパイルについては、次のセクションで詳しく説明します。

TypeScript ソースをコンパイルする

TypeScript ソースコードを通常の JavaScript に変換するには、TypeScript コンパイラをシステムにインストールする必要があります。TypeScript をインストールする最も便利な方法は、Node Package Manager（NPM）を使用することです。

以下に示すように、特定のプロジェクトにのみインストールできます。Node.js は、npm もインストールする前にインストールする必要があります。

npm install typescript --save-dev

TypeScript をグローバルにインストールすることもできます。

npm install -g typescript

最後に、次のように TypeScript のバージョンを確認することをお勧めします。TypeScript が正しくインストールされている場合、コマンドはバージョンを正しく表示します。

tsc -v

出力：

Version 4.6.4

このバージョンはあなたにとって異なるかもしれません。

tsc コマンドを使用して、TypeScript ソースコードを通常の JavaScript コードに変換できます。

構文：

tsc <source.ts>

次のように、いくつかの TypeScript コードを使用して tstranspileexample.ts という TypeScript ソースファイルを作成してみましょう。

class Vehicle {
    vehicleNo: string;
    vehicleBrand: string
}

次に、作成した TypeScript ファイルが存在するフォルダー内でコマンドウィンドウを開き、次のコマンドを実行します。

tsc tstranspileexample.ts

出力：

予想通り、TypeScript コンパイラは tstranspileexample.ts ソースを tstranspileexample.js と呼ばれる通常の JavaScript ファイルにコンパイルしました。これで、生成された JavaScript コードをブラウザーまたは Node.js 環境で実行できます。

エンタープライズレベルのプロジェクトでは、何百もの TypeScript ファイルがさまざまなフォルダに存在します。したがって、ファイルを 1つずつトランスパイルすることは実用的ではありません。

次のセクションでは、複数のファイルをオンザフライでコンパイルするように TypeScript コンパイラを構成する方法について説明します。

監視するように TypeScript コンパイラを構成する

TypeScript は、デフォルトの TypeScript コンパイラオプションを上書きするために、tsconfig.json と呼ばれる構成ファイルを導入しました。

これは JSON 形式のファイルであり、TypeScript コンパイラで認識されているさまざまな構成プロパティを追加できます。tsc コマンドのデフォルトの動作を変更できます。

ほとんどの実際の TypeScript プロジェクトでは、さまざまな場所から TypeScript ソースを即座にコンパイルし、それらを通常の JavaScript に変換する必要があります。

TypeScript ファイルで変更が行われるときはいつでも、TypeScript コンパイラは変更されたファイルをその場でコンパイルし、関連する JavaScript コードを再作成する必要があります。これは、監視およびコンパイルプロセスと呼ばれます。

以下の内容で tsconfig.json ファイルを作成しましょう。

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
	"outDir": "ts-built",
	"rootDir": "src"
  }
}

compilerOptions セクションは、TypeScript コードのコンパイルに関連する構成プロパティを定義しました。ECMAScript のターゲットバージョンは es2016 で、生成された JavaScript ファイルは ts-built フォルダーにプッシュされます。rootDir プロパティは、TypeScript コンパイラが TypeScript ソースファイルを検索するディレクトリを定義します。

この構成設定では、次のコマンドを実行して、TypeScript コンパイラーで監視およびコンパイル機能を有効にすることができます。

tsc -w

次のように、コマンドウィンドウが監視モードに変わります。

ソース TypeScript ファイルの 1つを変更して保存すると、TypeScript コンパイラは変更されたすべてのファイルを再コンパイルし、通常の JavaScript ファイルを生成します。この強力な機能には、数百のソースファイルを含む大規模なプロジェクトで使用する TypeScript コンパイラが付属しています。