TSConfigのtarget, libを理解する

この記事に書いてあること

TypeScriptはシンプルな言語仕様に反して、運用に必要な知識が多く苦労します。
TSConfigも知識の下地がある前提でドキュメントが書かれているため、target, libについてその仕組みと前提知識を記載します。

前提知識

JavaScriptとECMAScript

JavaScriptは言語、ECMAScriptは仕様です。
JavaScriptとは - JSPrimer

ES6やES2015などと表されるものはECMAScriptのバージョンではなく、単にその年に発行された仕様をまとめたものです。
ブラウザ側も機能単位でECMAScriptに準拠していくため、どの機能がサポートされているかはECMAScript compatibility tableなどで確認する必要があります。
このため「メジャーなブラウザでサポートされているES editionはいくつになるのか？」などという疑問に答えるのは困難で、無難にES6を対象とする、などという対応を取る必要があります。

TSCの挙動：transpileとpolyfil

TSC(Type Script Compiler)はTypeScriptのソースコードをJavaScriptのソースコードに変換（transpile）し、必要に応じてpolyfillを生成します。

polyfillとは、ある機能をサポートしていないブラウザでその機能を実現するためのコードです。
TSCにおいては「ES2020の機能を使ってTypeScriptを書きたいが、その機能はブラウザでサポートされていない」などという状況で使用されます。

トランスコンパイラ - Wikipedia (transpile)
Polyfill - Wikipedia

TSConfig

ドキュメント：TSConfig
各項目に設定できる値が列挙されているので一読をお勧めします。

target

transpileおよびpolyfilの対象を指定する項目です。
TSCを実行すると、targetに指定したES editionに準拠するJSのコードが出力されます。
つまりJSを実行する対象がサポートしているES editionをここに設定します。

lib

TypeScriptを記述する際に利用できる機能を列挙する項目です。
targetより上位のES editionの機能を利用したい場合、そのES editionを設定します。

また、そのほかに利用したい機能があれば列挙して指定します。
ブラウザで動かすスクリプトであるならDOMの型定義も必要になるためここで指定します。

実際の設定

「新し目の機能を使ってTSを記述し、ES2016が動作するブラウザ上で動かす」という条件で以下の設定を採用しました。

• target: ES6
• lib: ES2020, DOM