Typescript 转译是否处理将 ES6 转译为 ES5？答案

【问题标题】：Does Typescript transpilation handle transpiling ES6 to ES5?Typescript 转译是否处理将 ES6 转译为 ES5？
【发布时间】：2016-12-15 20:58:17
【问题描述】：

我正在使用 Angular 2 和 TypeScript 编写应用程序。我想使用 IE 11+、Chrome 45+ 等支持的 js 方法（尤其是数组的“过滤器”）。我的代码可以在旧版浏览器上运行吗？由于 Typescript 转换为 vanilla js，我不确定它对 ES6 功能的作用。

【问题讨论】：

typescriptlang.org/play/index.html
Array.filter() 与 IE 9+ 和所有其他浏览器兼容。它不是在 ES6 中引入的
注意这种方法也可以通过polyfills添加；你不一定需要转译。
@nicovank 好的，但问题仍然有效。我想知道一般情况，而不是那个特定的功能。 w3schools.com/jsref/jsref_find.asp 表示 IE12 和 avobe（我认为应该是 Edge）
@AlejandroB。 旁注： w3schools.com 因信息不正确而臭名昭著。就参考资料而言，依靠 Mozilla 开发者网络 (MDN) developer.mozilla.org 获取此类信息会更安全。

【解决方案1】：

TypeScript 允许您使用来自 ES6 的新 语言特性，它会将这些语言特性转换为 ES5；但是，它不会为 ES6 中存在但 ES5 中不存在的内置函数添加 polyfill。

如果您使用的内置函数仅存在于 ES6 中并且以 ES5 为目标，那么您需要包含必要的 polyfill 才能使代码在 ES5 环境中运行。

示例

例如，fill 是在 ES6 中 Array 的原型上发现的一个新函数。

const result = ["first", "second"].fill("all");

当你以 ES6 为目标时，一切都很好。编译器会将 lib.es6.d.ts 包含在 fill 的定义中，并且不会抱怨，因为它假定您将在存在 fill 函数的 ES6 环境中运行代码。 p>

但是，当您以 ES5 为目标时，它不会包含 lib.es6.d.ts，并且会告诉您该函数在 ES5 环境中不存在：

错误 TS2399：类型“string[]”上不存在属性“fill”。

要解决这个问题，您需要在项目的定义文件中将fill 添加到Array<T> 接口：

interface Array<T> {
    fill(value: T, start?: number, end?: number): this;
}

并包含polyfill。或者使用自动为您完成的东西。

【讨论】：

【解决方案2】：

是的，如果你将 tsconfig.json 设置为目标 ES5 就可以

在 tsconfig.json 编译器选项中设置 target: "ES5" 或在 CLI 中设置 --target ES5

至于 ES6、IDK 的内置功能，但我会将 babel-loader 添加到 webpack、grunt、gulp 等，以自动填充这些功能。

【讨论】：