TypeScriptのコンパイルについて

2023年 2月 24日

コンパイルについて

TypeScriptはJavaScriptのスーパーセット言語であり、静的型付けやクラスベースのオブジェクト指向、インターフェース、ジェネリックスなどの機能を提供しています。TypeScriptコードはJavaScriptコードにコンパイルされ、ブラウザー、Node.js、または他のランタイムで実行されます。
TypeScriptのコンパイラーは、TypeScriptコードをJavaScriptコードに変換します。コンパイラーは、コンパイル対象のTypeScriptファイルを指定することで実行されます。次に、コンパイラーはTypeScriptコードを解析し、JavaScriptコードに変換します。変換されたJavaScriptコードは、指定されたファイルに書き込まれます。

TypeScriptのコンパイラーには、コマンドラインツールと、プログラムから呼び出すことができるAPIがあります。コマンドラインツールを使用すると、TypeScriptファイルを手動でコンパイルすることができます。APIを使用すると、プログラムからTypeScriptファイルをコンパイルすることができます。

コンパイル手順とオプションについて

コンパイル

まず、TypeScriptのコードを作成します。例えば、以下のようなTypeScriptのコードを作成します。
下記のソースコードをmain.ts ファイルを新規作成し保存します。

function add(a: number, b: number) {
  return a + b;
}

let result = add(1, 2);
console.log(result);

TypeScriptのコードをコンパイルするには、以下のコマンドを使用します。

$tsc main.ts

このコマンドを実行すると、同じ名前のJavaScriptファイル（.js拡張子）が生成されます。
今回は、main.jsファイルが生成されます。

function add(a, b) {
    return a + b;
}
var result = add(1, 2);
console.log(result);

オプションを指定する

TypeScriptのコンパイラには、オプションを指定することができます。例えば、出力するJavaScriptファイルのバージョンを指定することができます。以下のコマンドを使用して、オプションを指定してコンパイルします。

--target

コンパイルされたJavaScriptのターゲットバージョンを指定します。デフォルトでは、最新のECMAScriptバージョンが使用されます。例えば、--target es5を指定することで、ES5互換のコードが生成されます。

--module

生成されるJavaScriptのモジュールシステムを指定します。デフォルトでは、CommonJSが使用されます。他に、AMDやES6などを指定することができます。

--outFile

複数のTypeScriptファイルを1つのJavaScriptファイルに結合する場合に使用します。出力ファイルのパスを指定します。

--sourceMap

コンパイルされたJavaScriptにソースマップを生成します。これにより、ブラウザのデバッグツールでTypeScriptのソースコードをデバッグすることができます。

--watch

TypeScriptファイルの変更を監視し、変更があった場合に自動的に再コンパイルします。

--noEmitOnError

コンパイルエラーがある場合、JavaScriptファイルを生成しないようにします。

--strict

TypeScriptの厳密な型チェックを有効にします。これにより、潜在的なバグを見つけることができます。

--noImplicitAny

暗黙的なany型を禁止します。これにより、型指定がされていない変数や関数のエラーを検出することができます。

これらは一部の例ですが、TypeScriptのコンパイラにはさまざまなオプションがあります。オプションの詳細については、公式ドキュメントを参照してください。

tsconfig.jsonファイルの設定について

TypeScriptでは、コンパイラの設定をtsconfig.jsonファイルに記述することができます。このファイルを使用することで、コマンドラインでオプションを指定する必要がなくなり、複数のファイルに対して共通の設定を行うことができます。
以下は、tsconfig.jsonファイルの例です。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

tsconfig.jsonファイルは、次の3つのセクションで構成されています。

compilerOptions

TypeScriptコンパイラのオプションを指定するセクションです。ここで指定したオプションは、コンパイル時に自動的に適用されます。

include

TypeScriptファイルの検索パターンを指定するセクションです。ここで指定したパターンにマッチするファイルが、コンパイルの対象となります。

exclude

コンパイルから除外するファイルやディレクトリを指定するセクションです。ここで指定したパターンにマッチするファイルは、コンパイルの対象外となります。

上記の例では、compilerOptionsセクションでコンパイラのオプションを指定しています。includeセクションで、srcディレクトリ以下にあるすべてのTypeScriptファイルをコンパイルの対象としています。また、excludeセクションで、node_modulesディレクトリや*.spec.tsファイルをコンパイルから除外しています。

tsconfig.jsonファイルの詳細については、公式ドキュメントを参照してください。