TypeScriptでtsconfig.jsonの「target」と「module」を理解する

TypeScriptでtsconfig.jsonの「target」と「module」を理解する

target

target は、コンパイル後のJavaScriptコードがどのJavaScriptバージョンの仕様に準拠するかを指定します。例えば、

• target: "es5" を設定すると、ES5の仕様に準拠したJavaScriptコードが生成されます。

設定例

{
  "compilerOptions": {
    "target": "es6"
  }
}

module

module は、コンパイル後のJavaScriptコードが使用するモジュールシステムを指定します。代表的なモジュールシステムは以下の通りです。

• commonjs: Node.jsで使用されるモジュールシステムです。
• amd: RequireJSなどのJavaScriptモジュールローダーで使用されるモジュールシステムです。
• umd: Universal Module Definitionの略で、CommonJSとAMDの両方の環境で使用できるモジュールシステムです。
• es6: ES6で導入されたモジュールシステムです。import/export構文を使用してモジュールの読み込みと書き出しを行います。

{
  "compilerOptions": {
    "module": "es6"
  }
}

targetとmoduleの組み合わせ

target と module は相互に影響しあいます。例えば、

• target: "es5" と module: "es6" を組み合わせると、ES5の仕様に準拠しつつ、ES6のモジュールシステムを使用するJavaScriptコードが生成されます。

注意点

• 古いブラウザをサポートする必要がある場合は、 target を古いバージョンのJavaScriptに設定する必要があります。
• 使用するモジュールシステムは、プロジェクトの環境に合わせて選択する必要があります。

まとめ

ES6モジュールを使用するサンプル

// ファイル名: main.ts

import { add } from "./math";

console.log(add(1, 2)); // 3

// ファイル名: math.ts

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

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6"
  }
}

この設定の場合、main.ts と math.ts はES6モジュールシステムを使用してモジュール化されます。

CommonJSモジュールを使用するサンプル

// ファイル名: main.js

var add = require("./math").add;

console.log(add(1, 2)); // 3

// ファイル名: math.js

module.exports = {
  add: function(a, b) {
    return a + b;
  }
};

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }
}

AMDモジュールを使用するサンプル

// ファイル名: main.js

define(["math"], function(math) {
  console.log(math.add(1, 2)); // 3
});

// ファイル名: math.js

define([], function() {
  return {
    add: function(a, b) {
      return a + b;
    }
  };
});

{
  "compilerOptions": {
    "target": "es5",
    "module": "amd"
  }
}

TypeScriptで「target」と「module」を設定する他の方法

コマンドラインオプション

tscコマンドを実行する際に、 --target と --module オプションを使用して設定できます。

tsc --target es6 --module commonjs main.ts

tsconfig.jsonファイルに "extends" プロパティを追加することで、別のtsconfig.jsonファイルの設定を継承することができます。

{
  "extends": "./base.tsconfig.json",
  "compilerOptions": {
    "module": "es6"
  }
}

Visual Studio Codeなどの開発ツールでは、プロジェクトの設定画面で「target」と「module」を設定することができます。

tsconfig.jsonファイル以外にも、「target」と「module」を設定する方法はいくつかあります。プロジェクトの規模や開発環境に合わせて、最適な方法を選択してください。