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

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

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

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

• es3
• es6 (デフォルト)
• esnext

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

• dom (DOM API)
• webworker (Web Worker API)
• scripthost (Script Host API)
• es5 (ES5標準ライブラリ)

「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を制御する重要なオプションです。これらのオプションを適切に設定することで、プロジェクトを効率的に開発することができます。

補足

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

TypeScript コンパイラオプション「target」と「lib」のサンプルコード

例 1: ES6 コードを ES5 ブラウザで実行する

// 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();

例 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();

これらの例は、TypeScript コンパイラオプション「target」と「lib」の使用方法を理解するための出発点として役立ちます。具体的なプロジェクトのニーズに合わせて、これらのオプションを調整する必要があります。

Targetとlib以外の代替方法

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オプションと互換性がない場合に役立ちます。

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

targetとlibオプションは、TypeScriptプロジェクトでライブラリとコードの互換性を管理するための一般的な方法ですが、他の方法も状況に応じて検討する必要があります。それぞれの方法の利点と欠点を理解し、プロジェクトのニーズに合った方法を選択することが重要です。