web-dev-qa-db-ja.com

ES5 / ES3をターゲットにすると、TypeScriptは何をトランスパイルしますか？

TypeScriptコンパイラがコードをトランスパイルして、指定したターゲットECMAScriptバージョン（ES5またはES3）と互換性を持たせるタイミングを理解しようとしています。

たとえば、TSCはfor(var int of intArray)を正常にトランスパイルしますが、Number.isInteger()（ w3schools によるとES6の機能）はトランスパイルしません。

Number.isInteger()はIE <11.0でサポートされていないため、これは問題です。VisualStudio（およびVS Code）は非互換性の警告を提供せず、 'トランスパイルされます。

何がトランスパイルされると期待できますか、そして何が期待できませんか？私は当初、すべてがトランスパイルされることを期待していたので、このようなことを追跡する必要はありませんでしたが、そうではないようです。

typescripttargettranspiler
13
JoshMB

コンパイラーは、使用するように指示したlibに基づく機能をサポートします。
targetとlibコンパイラオプション 。

上記のリンクに書かれているように：

--libが指定されていない場合、デフォルトのライブラリが挿入されます。注入されるデフォルトのライブラリは次のとおりです。
►--targetES5の場合：DOM、ES5、ScriptHost
►--targetES6の場合：DOM、ES6、DOM.Iterable、ScriptHost

さまざまなライブラリはすべて プロジェクトの一部 です。

_es3_または_es5_をターゲットにしている場合、（あなたが述べたように）_es6_機能であるため、Number.isInteger()を使用することはできません。
そのためのポリフィルがある場合でも、_es5_ libを使用して_es6_をターゲットにすることができます。

_--target es5 --lib DOM,ES6,ScriptHost
_

または、 lib.es6.d.ts の定義をコピーすることもできます。

_interface NumberConstructor {
    isInteger(number: number): boolean;
}
_

ターゲットに関係なくlet、const、_for/of_のようなものを使用できる理由は、機能がサポートされていない場合でも、コンパイラが同等のコードを生成する方法を知っているためです。選択したターゲット。

例えば：

_const arr = [1, 2, 3];
for (let num of arr) {}
_

コンパイルされます：

_var arr = [1, 2, 3];
for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
    var num = arr_1[_i];
}
_

ターゲットが指定されていない場合。
ご覧のとおり、constとletはvarsに変換され、_for/in_は通常のfor。

Number.isInteger()は別のものであり、Promiseや 'Symbol`などの特定のターゲットには存在しない機能です。
コンパイラはポリフィルを追加しません。ポリフィルを追加して、そこにあることをコンパイラに通知するのはあなた次第です。

9
Nitzan Tomer

TypeScript transpilesですが、そうではありませんpolyfill。したがって、それを考える1つの方法は、targetで有効な構文ではないものはすべてtranspiledで有効な構文になるということです。たとえば、ターゲットを_ES5_に設定してclassキーワードを使用すると、次のようにトランスパイルされます。

_class Greeter {
}
_

これに：

_var Greeter = /** @class */ (function () {
    function Greeter() {
    }
    return Greeter;
}());
_

（これでもっと遊ぶことができます ここ 。）

一方、不足している機能は追加されません。これは、自分でpolyfillする必要があります。 Number.isInteger()は有効な_ES5_構文であり、_ES5_に存在する機能ではありません。 _babel-polyfill_ （内部で _core-js_ を使用）をインポートするか、 polyfill.io）のようなサービスを使用して、これを自分でポリフィルできます。 。

注：libオプションをポリフィルと混同しないでください。これしませんポリフィル機能。これらのESバージョンの機能が存在するかのように動作するようにTypeScriptに指示するだけなので、適切にタイプチェックします。サポートしているブラウザでは、ポリフィルピースを自分で処理する必要があります。適切なlibsを指定しないと、TypeScriptはNumber.isInteger()が何を表しているのかわからないと文句を言います。

TypeScriptトランスパイルの機能の包括的なリストはわかりませんが、TypeScript + _core-js_ polyfills here の表を見ることができます。ポリフィルとトランスパイルの詳細 ここ 。

6
lobati