TypeScript'target'和Babel

Question

我正在使用TypeScript和Webpack，并且我有关于将TypeScript代码转换为ES5代码的问题。

如果我理解正确，我不需要任何babel加载程序，如果我将target选项（在tsconfig.json）设置为ES5？对？

如果不是，那么区别在哪里？

Answer 1

答案是：这取决于。这取决于您要使用ES6的哪些功能。 TypeScript处理其中的大部分并编译为ES5，但也有一些例外情况，例如：for..of循环。 for..of循环是基于迭代器的ES6功能。对于每个对象，您可以定义一个方法并将其放在名为[Symbol.iterator]的键下，并且此方法将用于for..of循环遍历该对象。你可以找到更多信息for example here。但是，如果您将TypeScript目标设置为ES5，则这不起作用。这是因为在ES5的情况下，TypeScript会将循环编译为基本的for循环，假设迭代的对象具有明确的length属性并且是整数索引的（与数组类似）。看一下例子：

for (const a of someObject) { 
//some operations 
} 

，如果你设定目标ES5这将汇编成

for (var _i = 0; _i < someObject.length; _i++) { 
    var a = someObject[_i]; 
    //some operations 
} 

这需要您提供既length和整数性能，从0到length-1该对象上。这与迭代器的思想是相反的，在ES6中，它允许您自由定义如何迭代对象。所以总结一下：如果你打算在ES5目标的TypeScript代码中使用ES6功能，请确定它们将被编译到什么地方。如果输出代码有一些限制，请将目标设置为ES6，并在结果上使用Babel。