同时使用 TypeScript 和 Traceur 有什么好处？

Question

您可以将 TypeScript 配置为输出 ES5 或 ES6。只要你想运行你的应用程序在一个本身不支持 ES6 的平台上运行，你就必须使用像 Traceur 这样的编译器（包括 Traceur 运行time 库）将 ES6 编译成 ES5。

这样做比简单地告诉 TypeScript 输出 ES5 有什么好处吗？（我不希望该应用程序只针对原生 ES6 平台）

据我所知，您无法使用 TypeScript (1.5) 编写无法在 ES5 上运行的程序（前提是该程序可以编译并且包含正确的库）。我错了吗？

Answer 1

使用 Babel 或 Traceur 而不是 TypeScript 的原因

到目前为止，Typescript 团队选择不让生成的代码依赖于运行时。 ES6 的一些特性可以通过 polyfills 轻松地与 TS 一起使用（例如：ES6 Promises）。其他功能需要转译器和 polyfill（例如：ES6 生成器）的合作。可以使用带有 TS 的生成器（自 TS 1.6 起），但目标必须是 ES6。这是使用 Babel 或 Traceur 的一个很好的理由。

不使用 Babel 或 Traceur 而不是 TypeScript 的原因

但还有其他不使用 Babel 和 Traceur 的充分理由。尝试转译一些 ES6 代码。

ES6代码：

let list = ['ab', 'cd'];
for (let item of list) {
    console.log(item);
}

TypeScript 生成的 ES5（使用 the Playground）：

var list = ['ab', 'cd'];
for (var _i = 0; _i < list.length; _i++) {
      var item = list[_i];
      console.log(item);
}

Traceur 出品的 ES5（使用 the REPL）：

$traceurRuntime.ModuleStore.getAnonymousModule(function() {
    "use strict";
    var list = ['ab', 'cd'];
    var $__4 = true;
    var $__5 = false;
    var $__6 = undefined;
    try {
      for (var $__2 = void 0,
          $__1 = (list)[$traceurRuntime.toProperty(Symbol.iterator)](); !($__4 = ($__2 = $__1.next()).done); $__4 = true) {
        var item = $__2.value;
        {
          console.log(item);
        }
      }
    } catch ($__7) {
      $__5 = true;
      $__6 = $__7;
    } finally {
      try {
        if (!$__4 && $__1.return != null) {
          $__1.return();
        }
      } finally {
        if ($__5) {
          throw $__6;
        }
      }
    }
    return {};
});
//# sourceURL=traceured.js

Babel 出品的ES5（使用the REPL）：

'use strict';

var list = ['ab', 'cd'];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
    for (var _iterator = list[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
        var item = _step.value;

        console.log(item);
    }
} catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
} finally {
    try {
        if (!_iteratorNormalCompletion && _iterator['return']) {
            _iterator['return']();
        }
    } finally {
        if (_didIteratorError) {
            throw _iteratorError;
        }
    }
}

Traceur 和 Babel 的解决方案很难看，因为变量 list 可能是 an ES6 iterable 而这些转译器不知道类型。 TypeScript 推断 list 的类型是数组 string[] 并且它只生成数组的代码。

同时使用 TypeScript 和 Traceur 有什么好处？

What is the advantage of using both TypeScript and Traceur?

compilation

typescript

ecmascript-6

traceur

使用 Babel 或 Traceur 而不是 TypeScript 的原因

不使用 Babel 或 Traceur 而不是 TypeScript 的原因