以 ES5 / ES3 为目标时，Typescript 会转译什么？

Question

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

例如，TSC 可以很好地转换 for(var int of intArray)，但不能转换 Number.isInteger()（这是 ES6 特性，根据 w3schools）。

Number.isInteger() 在 IE

什么可以被编译，什么不能？我最初预计所有内容都会被转译，这样我就不必跟踪这样的事情，但事实似乎并非如此。

Answer 1

TypeScript transpiles 但不 polyfill。因此，一种思考方式是，target 中的任何无效语法都将转译为有效语法。例如，当使用 class 关键字并将目标设置为 ES5 时，它将转译：

class Greeter {
}

到这里：

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

（你可以用这个here玩更多。）

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

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

我不知道 TypeScript 转换的功能的完整列表，但您可以查看 TypeScript+core-js polyfills here 的表格。 更多关于 polyfill 与 transpilation 的阅读内容here。

Answer 2

编译器支持基于您告诉它使用的库的功能。
有两种方法可以控制编译器将使用哪个库，使用 target 和 lib compiler options。

正如上面链接中所写：

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

所有不同的库都是part of the project。

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

--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 和“符号”。
编译器不会添加 polyfill，由你来添加它，然后告诉编译器它就在那里。