オプション「target」と「lib」の詳細解説：TypeScript コンパイラをマスターするための必須知識

TypeScriptコンパイラオプション「target」と「lib」の詳細解説

TypeScriptでプロジェクトを構築する場合、コンパイラオプション「target」と「lib」を適切に設定することが重要です。これらのオプションは、生成されるJavaScriptコードのバージョンと、利用可能なライブラリAPIを制御します。

「target」オプション

「target」オプションは、生成されるJavaScriptコードのバージョンを指定します。利用可能なオプションは以下の通りです。

• esnext
• es8
• es7
• es6 (デフォルト)
• es5
• es3

「lib」オプション

「lib」オプションは、TypeScriptコードで使用できるライブラリAPIを指定します。利用可能なオプションは以下の通りです。

• esnext (最新のES標準ライブラリ)
• es8 (ES8標準ライブラリ)
• scripthost (Script Host API)
• webworker (Web Worker API)
• dom (DOM API)

「target」と「lib」の使い分け

一般的に、「target」と「lib」は一緒に設定されます。例えば、ES6コードをES5ブラウザで実行する場合、以下の設定になります。

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"]
  }
}

この設定では、TypeScriptコンパイラはES5コードを生成し、DOM APIとES5標準ライブラリを利用できるようにします。

「lib」オプションのみの設定

場合によっては、「lib」オプションのみを設定することもできます。例えば、ES6コードをES5ブラウザで実行する場合、以下の設定になります。

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es5", "dom", "es6.promise"]
  }
}

この設定では、TypeScriptコンパイラはES6コードを生成しますが、Promise APIはES5ブラウザで利用できないため、Promise polyfillを追加する必要があります。

「target」と「lib」オプションは、TypeScriptコンパイラで生成されるJavaScriptコードと、利用可能なライブラリAPIを制御する重要なオプションです。これらのオプションを適切に設定することで、プロジェクトを効率的に開発することができます。

• JavaScriptコードは、WebブラウザやNode.jsなどの実行環境で実行できます。
• TypeScriptコンパイラは、TypeScriptコードをJavaScriptコードに変換します。
• TypeScriptは、JavaScriptを静的に型付けする言語です。

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"]
  }
}

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

console.log(greet('TypeScript'));

この例では、tsconfig.json ファイルで「target」オプションを es5 に、「lib」オプションを ["es5", "dom"] に設定しています。これにより、TypeScript コンパイラは ES5 コードを生成し、DOM API と ES5 標準ライブラリを利用できるようにします。

例 2: ES7 コードを Promise polyfill とともに実行する

// tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es5", "dom", "es6.promise"]
  }
}

// index.ts
async function main() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await response.json();
  console.log(data);
}

main();

この例では、tsconfig.json ファイルで「target」オプションを es6 に、「lib」オプションを ["es5", "dom", "es6.promise"] に設定しています。これにより、TypeScript コンパイラは ES6 コードを生成しますが、Promise API は ES5 ブラウザで利用できないため、es6.promise オプションを追加して Promise polyfill を利用できるようにしています。

例 3: 最新の ES 機能を利用する

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom"]
  }
}

// index.ts
const asyncFunction = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await response.json();
  console.log(data);
};

asyncFunction();

Targetとlib以外の代替方法

Polyfillを使用する

Polyfillは、古いブラウザで新しいJavaScript機能をエミュレートするために使用できるコードです。Promise polyfillのように、特定のライブラリ機能のみをエミュレートするpolyfillもあります。

Babelを使用する

Babelは、JavaScriptコードを古いブラウザと互換性のあるコードに変換できるトランスパイラです。Babelは、targetオプションと同様に、生成されるコードのバージョンを指定できます。

TypeScriptコンパイラオプションmoduleを使用する

moduleオプションは、TypeScriptコードを生成するモジュール形式を指定します。es6やcommonjsなどのオプションが利用可能です。

esModuleInteropオプションは、ES modulesとCommonJS modulesの相互運用を可能にします。

skipLibCheckオプションは、TypeScriptコンパイラがライブラリAPIの使用をチェックしないように指示します。これは、ライブラリのバージョンが設定されたlibオプションと互換性がない場合に役立ちます。

それぞれの方法の利点と欠点