TypeScript コンパイラオプションの罠： `module` と `target` を正しく選択しないとどうなる？

TypeScript コンパイルオプション: module vs target

TypeScript コンパイルオプション module と target は、どちらもコンパイルされた JavaScript コードの出力形式に影響を与える重要なオプションです。しかし、それぞれ異なる役割を果たします。

target オプション

target オプションは、TypeScript コンパイラが生成する JavaScript コードの ECMAScript レベルを指定します。これは、コンパイラが使用する言語機能と、出力されたコードが実行できる JavaScript エンジンを決定します。

利用可能な target オプションの値は以下の通りです。

• esnext
• es2020
• es2019
• es2015 (別名: es6)
• es6 (デフォルト)
• es5
• es3

module オプション

module オプションは、コンパイルされた JavaScript コードが使用するモジュールシステムを指定します。これは、コードの依存関係をどのように解決し、コードをどのようにバンドルするかを決定します。

• uap: Universal Module Definition (UMD) を使用する
• es6: ES6 モジュールシステムを使用する (別名: esm)
• system: SystemJS モジュールシステムを使用する
• amd: AMD モジュールシステムを使用する
• commonjs: CommonJS モジュールシステムを使用する
• none (デフォルト): モジュールシステムを使用しない

module と target の違い

• module オプションは、コンパイルされた JavaScript コードが使用するモジュールシステムを指定します。
• target オプションは、コンパイラが生成する JavaScript コードの言語レベルを指定します。

例

以下の例は、target オプションと module オプションをどのように組み合わせるかを示しています。

tsc --target es2015 --module commonjs index.ts

このコマンドは、index.ts ファイルを ES2015 レベルの JavaScript コードにコンパイルし、CommonJS モジュールシステムを使用するように指定します。

// target オプション: es5
// module オプション: commonjs

// ファイル: index.ts

function greet(name: string): string {
  return `Hello, ${name}!`;
}

const message = greet('TypeScript');
console.log(message);

// ファイル: index.js

"use strict";

exports.greet = function greet(name) {
  return `Hello, ${name}!`;
};

const message = exports.greet('TypeScript');
console.log(message);

このコードは、CommonJS モジュールシステムを使用して、greet 関数をエクスポートします。index.js ファイルを Node.js で実行すると、以下の出力が表示されます。

Hello, TypeScript!

この例は、target オプションと module オプションがどのようにコンパイルされた JavaScript コードに影響を与えるかを示しています。

• target: es2019, module: esm：ES2019 レベルの JavaScript コードを生成し、ES6 モジュールシステムを使用します。

• 生成されたコードのサイズとパフォーマンス: 最新の ECMAScript レベルは、よりコンパクトでパフォーマンスの高いコードを生成する可能性がありますが、古い JavaScript エンジンではサポートされない可能性があります。
• 使用可能な言語機能: 特定の ECMAScript レベルで導入された言語機能のみが使用できます。

module オプションは、コンパイルされた JavaScript コードがどのようにモジュールとしてバンドルされるかを決定します。これは、以下の要素に影響を与えます。

• コードの実行: 異なるモジュールシステムは、コードを異なる方法で実行します。
• コードの依存関係の解決: モジュールシステムは、コードの依存関係をどのように解決し、それらを一緒にどのようにバンドルするかを決定します。

target と module の選択

target と module のオプションを選択する際は、以下の要素を考慮する必要があります。

• プロジェクトの要件: コードに必要な機能とパフォーマンス要件。
• コードの配布方法: コードをどのように配布および使用するか。
• ターゲットランタイム環境: コンパイルされたコードが実行される JavaScript エンジン。

一般的に推奨される設定

• コードをさまざまな JavaScript エンジンで実行する必要がある場合は、target オプションを es5 または es6 に設定し、module オプションを none に設定します。
• コードを Node.js または Web ブラウザで実行する場合は、module オプションを commonjs または es6 に設定します。
• 最新の安定した JavaScript エンジンを使用している場合は、target オプションを es2019 または esnext に設定します。

• TypeScript は、JavaScript の進化とともに常に更新されています。最新の機能とオプションについては、TypeScript ドキュメントを参照してください。
• tsconfig.json ファイルを使用して、プロジェクト全体のコンパイラオプションをデフォルト設定することができます。
• TypeScript コンパイラは、さまざまなオプションを使用して、コンパイルされたコードの出力挙動を細かく制御できます。