在针对ES5/ES3时,Typescript会有什么变化？

Question

我试图了解Typescript编译器何时会转换代码以使其与我指定的目标ECMAScript版本(ES5或ES3)兼容.

例如,TSC将会很好地传播for(var int of intArray),但它并不会传播Number.isInteger()(根据w3schools,这是一个ES6功能).

Number.isInteger()IE <11.0不支持,所以这是一个问题.Visual Studio(和VS代码)不提供不兼容的警告,并且不会被转换.

我能期望得到什么,有什么不可以？我最初预计一切都会被转化,所以我不必跟踪这样的事情,但事实似乎并非如此.

Answer 1

编译器支持基于您告诉它使用的lib的功能.
通过使用target和编译器选项,有两种方法可以控制编译器将使用哪个lib .lib

正如它在上面的链接中所写:

如果未指定--lib,则注入默认库.注入的默认库是: ►For--target
ES5:DOM,ES5,ScriptHost►For--
target ES6:DOM,ES6,DOM.Iterable,ScriptHost

所有不同的库都是项目的一部分.

如果您正在定位,es3或者es5您无法使用Number.isInteger()(如您所述)es6功能.
如果你有一个polyfil,那么你仍然可以es5使用es6lib:

--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'.
编译器不会添加polyfill,它取决于你添加它,然后告诉编译器它在那里.

Answer 2

打字稿transpiles但不填充工具。因此，可以考虑的一种方法是，target将您中任何无效语法的内容都转换为有效语法。例如，在class将目标设置为的情况下使用关键字时ES5，它将转换为：

class Greeter {
}

对此：

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

（您可以在这里玩更多。）

另一方面，它不会增加缺少的功能，您必须自己填充。Number.isInteger()是有效的ES5语法，而不是其中的功能ES5。您可以通过导入babel-polyfill（core-js在后台使用）或使用诸如polyfill.io之类的服务来自己填充。

注意：请勿将lib选项与polyfill 混淆。这不是 polyfill功能。它只是告诉TypeScript好像存在那些ES版本中的功能一样，因此将对它们进行适当的类型检查。对于支持的浏览器，您仍然需要自己处理polyfill。如果未指定适当lib的，TypeScript将抱怨它不知道Number.isInteger()代表什么。

我不知道一个全面的列表，它的特点打字稿transpiles的，但你可以看到一个表，打字稿+ core-jspolyfills 这里。在这里阅读有关polyfills与transpilation的更多内容。