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

2024-06-15

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

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

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

es3
es6 (デフォルト)
es2015 (別名: es6)
es2016
esnext

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

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

module と target の違い

target オプションは、コンパイラが生成する JavaScript コードの言語レベルを指定します。
module オプションは、コンパイルされた 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: es2015, module: amd：ES2015 レベルの JavaScript コードを生成し、AMD モジュールシステムを使用します。

これらのオプションを組み合わせて、さまざまな実行環境に適したコードを生成することができます。

TypeScript コンパイルオプション: module vs target の補足説明

target オプションは、TypeScript コンパイラが生成する JavaScript コードの ECMAScript レベルを厳密に制御します。これは、以下の要素に影響を与えます。

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

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

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

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

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

一般的に推奨される設定

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

補足

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

typescript typescript1.8