当目标为ES5/ES3时，Typescript会翻译什么？

Question

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

例如，TSC 可以很好地转译 for（intArray 的 var int），但它不会转译 Number.isInteger（）（根据 w3schools 的说法，这是 ES6 的一个功能）。

IE中不支持< code>Number.isInteger()

我能期望什么被转移，什么不会？我最初预计一切都会被转移，这样我就不必跟踪这样的事情，但事实似乎并非如此。

Answer 1

编译器支持基于您告诉它使用的库的功能。
有两种方法可以通过使用目标和库编译器选项来控制编译器将使用哪个库。

正如上面链接中所写的:

如果未指定--lib，则会注入默认库。注入的默认库是：
► 对于--目标ES5:DOM、ES5、ScriptHost
► 对于--目标ES6:DOM、ES6、DOM.Iterable、ScriptHost

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

如果您的目标是 es3 或 es5，那么您不能使用 Number.isInteger（），因为它（如您所述）是 es6 功能。
如果你有一个 polyfil，那么你仍然可以使用 es5 库来定位 es6：

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

或者您可以复制lib.es6.d.ts的定义:

interface NumberConstructor {
    isInteger(number: number): boolean;
}

无论目标如何，您都可以使用let、const、for/of之类的东西的原因是编译器知道如何生成等效的html" target="_blank">代码，即使所选目标不支持该功能。

例如:

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

TypeScript传输html" target="_blank">文件，但不聚合填充。因此，可以这样想，任何在< code>target中无效的语法都将被转换成有效的语法。例如，当使用< code>class关键字并将目标设置为< code>ES5时，它将传输以下内容:

class Greeter {
}

对此：

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

(你可以在这里多玩玩这个。)

另一方面，它没有添加缺失的功能，您必须自己进行多填充。Number.is整数（）是有效的ES5语法，它只是不存在于ES5中的功能。您可以通过导入Babel-Poly的（在引擎盖下使用core-js）或使用类似polyfill.io.的服务来自己进行多填充

注意：不要将 lib 选项与 polyfill 混淆。这不会填充要素。它只是告诉 TypeScript 表现得好像这些 ES 版本中的功能存在一样，因此它会适当地进行类型检查。对于支持的浏览器，您仍然需要自己处理 polyfill 部分。如果你没有指定适当的libs，TypeScript会抱怨它不知道Number.isInteger（）代表什么。

我不知道TypeScript可移植功能的全面列表，但您可以在这里看到TypeScriptcore-jspolyfill的表格。更多关于polyfills与transplation的阅读请点击此处。