TypeScript'target'和Babel

Question

我正在TypeScript使用Webpack，我对将TypeScript代码转换为ES5代码感到疑问。

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

如果没有，那么差异在哪里？

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的{​​{1}}和整数属性。这与迭代器的概念相反，在ES6中，您可以自由地定义迭代对象的方式。

总而言之：如果您计划在ES5目标TypeScript代码中使用ES6功能，请确保将它们编译为什么。如果输出代码有一些限制，请将目标设置为ES6并在结果上使用Babel。