【保存版】tsconfig.jsonの「target」オプション：バージョン指定で開発をスムーズに
TypeScriptにおけるtsconfig.jsonの「target」オプションとは？
このファイルの中で、targetオプションは、コンパイルされたJavaScriptのターゲットとなるJavaScriptのバージョンを指定します。これは、生成されるJavaScriptコードがどのブラウザや実行環境で実行可能であるかを決定します。
targetオプションで指定できる値は、以下の通りです。
- ES7、ES8、：以降のバージョン
- ES6：最新のバージョンの1つ
- ES5：現在最も広く使用されているバージョン
- ES3：JavaScriptの初期バージョン
例
{
"compilerOptions": {
"target": "ES6"
}
}
上記の例では、コンパイルされたJavaScriptコードは、ES6以降のブラウザや実行環境で実行可能になります。
targetオプションを指定しない場合、デフォルトはES5となります。
targetオプションの選択は、プロジェクトの要件によって異なります。古いブラウザをサポートする必要がある場合は、ES5などの古いバージョンをターゲットにする必要があります。一方、最新機能を利用したい場合は、ES6またはそれ以降のバージョンをターゲットにすることができます。
- polyfillを使用することで、古いブラウザで新しいJavaScript機能を使用することができます。
- targetオプションは、TypeScriptコンパイラが使用するライブラリにも影響を与えます。ターゲットとなるJavaScriptバージョンに対応するライブラリのみが使用されます。
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs"
}
}
index.ts
function greet(name: string): string {
return `Hello, ${name}!`;
}
const message = greet('TypeScript');
console.log(message);
このコードをコンパイルするには、以下のコマンドを実行します。
tsc index.ts
コンパイルされたJavaScriptコードは、index.jsファイルに出力されます。
"use strict";
function greet(name) {
return `Hello, ${name}!`;
}
const message = greet('TypeScript');
console.log(message);
このコードは、ES6の機能であるアロー関数やテンプレートリテラルを使用しています。これらの機能は、targetオプションをES6に設定することで有効になります。
- targetオプションを変更することで、生成されるJavaScriptコードのバージョンを変更できます。
- この例では、moduleオプションをcommonjsに設定しています。これは、Node.jsのCommonJSモジュールシステムを使用することを意味します。
TypeScriptにおける「target」オプションの代替手段
Babelを使用する
Babelは、JavaScriptのコードを古いバージョンにトランスパイルするためのツールです。targetオプションの代わりにBabelを使用することで、より柔軟なバージョン管理が可能になります。
{
"presets": ["@babel/preset-env"]
}
上記のpackage.jsonファイルは、Babelを使用して、現在の環境に合わせてJavaScriptコードをトランスパイルすることを指定します。
Browserlistを使用する
Browserlistは、さまざまなブラウザと実行環境の互換性を考慮したJavaScriptコードを生成するためのツールです。targetオプションの代わりにBrowserlistを使用することで、より精度の高いバージョン管理が可能になります。
{
"browsers": [
"> 1%",
"last 2 versions",
"not dead"
]
}
- 非推奨ではないすべてのブラウザ
- 最新の2つのブラウザバージョン
- 1%以上のシェアを持つすべてのブラウザ
PostCSSを使用する
PostCSSは、CSSコードを古いバージョンにトランスパイルするためのツールです。targetオプションと併用することで、より包括的なバージョン管理が可能になります。
/* postcss.config.js */
module.exports = {
plugins: [
require('autoprefixer')({
browsers: [
"> 1%",
"last 2 versions",
"not dead"
]
})
]
};
上記のpostcss.config.jsファイルは、PostCSSを使用して、以下の条件に合致するブラウザ向けのCSSコードをトランスパイルすることを指定します。
typescript tsconfig transpiler
